skip to Main Content

This is my attempt but the div wrapper doesn’t center the content div.
I have a div containing ang box shape with another div with texts.

.wrapper {
  position:absolute;
    left: 50%;
}

.content {
    width:90%;
text-align:justify;
    left: -50%;
    display: inline-block;
}

.button {
text-align:center;
}


<div class="wrapper">

<div name="box" style="background-color:#FF6201;width:220px;height:220px;:30px">
   <div class="content">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,<button class="button">
   weee</button>
</div>

</div>

</div>

I can actually do on html by adding tags but i am hoping to make this done in css. pls help.

2

Answers


  1. I found this nifty trick a while back:

    margin-left: 50%;
    transform: translate(-50%)
    

    This will center any statically positioned Div. I am assuming that you want the box centered; if so I would move the class=”content” to that element and then revise your css to the following:

    .content {
     width:90%;
     margin-left: 50%;
     text-align:justify;
     transform: translate(-50%) 
    }
    

    Here is a fiddle link to see if this is what you were going for: https://jsfiddle.net/e3tsj8qf/5/

    Edit:
    Code from fiddle referenced below (accepted as answer):

     .box {
      background-color:#FF6201;
      width:220px;
      height:220px;
    }
    
    .content {
        width:90%;
        text-align:justify;
        margin-left: 5%;
    }
    
    .centered {
      text-align:center;
    }
    <div class="box" name="box">
       <div class="content">
       Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,
       </div>
       <div class="centered">
          <button class="button">weee</button>
       </div> 
    </div>
    
    Login or Signup to reply.
  2. Try this code markup and style…..

    *{box-sizing:border-box};
    *{margin:0;padding:0}
    .wrapper {
      position: absolute;
      left: 50%;
      transform:translate(-50%);
    }
    
    .content {
      width: 85%;
      text-align: center;
      display: block;
      margin:0 auto;
    
    }
    
    .button {
      text-align: center;
    }
    <div class="wrapper">
    
      <div name="box" style="background-color:#FF6201;width:220px;height:220px;">
        <div class="content">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,<button class="button">
       weee</button>
        </div>
    
      </div>
    
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search