CODEWITHSUNDEEP
htmlcss
user3117337
user3117337

Reputation: 223

Center all elements in a div but the text are justified in css

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.

Upvotes: 0

Views: 56

Answers (2)

Joshua Miles
Joshua Miles

Reputation: 81

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>

Upvotes: 1

Momin
Momin

Reputation: 3320

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>

Upvotes: 0

Related Questions