seo Question posted in
Some basic information to get you started with this can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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. 0

    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