I'm trying to center text in the middle of my page HTML

Question

I have three different div tags (not inside each other) with code so it has one puts words to left, center, or right but the center is very off centered. Here is HTML code:

.desc {
  float: right;
  color: skyblue;
}

.desc1 {
  float: left;
  color: skyblue;
}

.desc2 {
  text-align: center;
  color: skyblue;
}

<div class="desc1">
  <h2>What we are here to do!</h2>
  <p>Example</p>
</div>
<div class="desc2">
  <h2>What we have completed</h2>
  <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>

Question already asked: https://stackoverflow.com/questions/42187838/how-to-vertically-center-a-div-on-page/45110782#45110782 — Billu, Jul 28 '17 at 13:13
You need to change the order, if you want this to work. The element to be floated to the right must come first or second. If you make it the last one, then it does not affect the placement of the elements before it any more in the way you want. You should perhaps not do this using floating any more these days anyway; look into flexbox. — CBroe, Jul 28 '17 at 13:15
Can you show the code of the parent tag that contains this div s. It may be because of parent tag's width is not enough for these 3 divs? — , Jul 28 '17 at 13:15
@BilluG That's for vertical centering. Joe is asking about horizontal alignment. — BoffinBrain, Jul 28 '17 at 13:15
@BilluG thats a different question. It may be on same subject but the implementation is different. — , Jul 28 '17 at 13:15

score 6 · Accepted Answer · answered Jul 28 '17 at 13:18

6

You can use flexbox to fix that,

HTML:

<div class="container">
  <div class="desc1">
    <h2>What we are here to do!</h2>
    <p>Example</p>
  </div>
  <div class="desc2">
    <h2>What we have completed</h2>
    <p>Recent work (can include pictures)</p>
  </div>
  <div class="desc">
    <h2>Company Description</h2>
    <p>EXAMPLE!</p>
  </div>
</div>

CSS:

.container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

answered Jul 28 '17 at 13:18

Victor Allegret

2,344
3
18
31

Works fine. I was going to post a similar solution. – Priyanjit Jul 28 '17 at 13:21
Can you add demo of your solution? – Vadim Ovchinnikov Jul 28 '17 at 13:22
@VictorAllegret It will work not so good because we can here different width of elements https://jsfiddle.net/uqr20k64/1/ `space-between` just adds equal spaces between elements. This property doesn't care about equality of elements. – Vadim Ovchinnikov Jul 28 '17 at 13:31

score 1 · Answer 2 · answered Jul 28 '17 at 13:19

Try this

.desc {
text-align: center;
color: skyblue;
width:33%
}

.desc1 {
text-align: center;
color: skyblue;
width:33%
}

.desc2 {
text-align: center;
color: skyblue;
width:33%
}
.desc4{
  display: flex
}

<div class="desc4">
<div class="desc1">
   <h2>What we are here to do!</h2>
   <p>Example</p>
</div>
<div class="desc2">
   <h2>What we have completed</h2>
   <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>
</div>

Ahmad · Answer 3 · 2017-07-28T13:22:46.313

0

Try this:

.desc2 {
        height: 200px;
        width: 400px;
        color: skyblue;

        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -200px;
    }

Hope this is helpful :)

edited Jul 28 '17 at 13:22

answered Jul 28 '17 at 13:17

Ahmad

445
5
15

JamesSkinner12 · Answer 4 · 2017-07-28T14:12:44.640

0

You could also use the <center> </center> tag. It works quite well for this.

edited Jul 28 '17 at 14:12

answered Jul 28 '17 at 13:20

JamesSkinner12

23
4

My apologies, I forgot to put the center tags in code format so they didn't show up. Updated now. – JamesSkinner12 Jul 28 '17 at 14:14

score 0 · Answer 5 · answered Jul 28 '17 at 13:20

Your desc2 contents are technically centered, relative to the remaining space. Your desc (right column) is getting pushed below the rest of your content because it will start floating from the point where the content of desc2 ends.

The easiest solution is to move desc up above desc2 so that the left/right floated items come first, and will start at the same y-position.

After that, if you want to ensure your main content is truly centered, you may need to specify a width for your left/right columns.

score 0 · Answer 6 · answered Jul 28 '17 at 13:21

What you could do is actually wrap those 3 divs inside another div, and apply a display : flex to this main div, like so :

.main {
display : flex;
justify-content : space-between;
}

.desc {
  float: right;
  color: skyblue;
}

.desc1 {
  float: left;
  color: skyblue;
}

.desc2 {
  text-align: center;
  color: skyblue;
}

<div class="main">

  <div class="desc1">
    <h2>What we are here to do!</h2>
    <p>Example</p>
  </div>
  <div class="desc2">
    <h2>What we have completed</h2>
    <p>Recent work (can include pictures)</p>
  </div>
  <div class="desc">
    <h2>Company Description</h2>
    <p>EXAMPLE!</p>
  </div>

</div>

Since the float property have some strange behaviour in some conditions, display : flex is much more appropriate when you want to display several parts side by side. I really recommend you to learn a little bit more about those flex properties, they are really time-saving. I hope it might help you.

it will work not so good because we can here different width of elements jsfiddle.net/uqr20k64/1 `space-between` just adds equal spaces between elements. This property doesn't care about equality of elements. — Vadim Ovchinnikov, Jul 28 '17 at 13:38
I didn't really understand, but do you mean that if there is, for example, an element with width : 900px; one with width : 200px and another with width : 20px;, there will be the same amount of space between each of them ? I don't see where is the problem then... — Louis 'LYRO' Dupont, Jul 28 '17 at 13:41

score 0 · Answer 7 · answered Jul 28 '17 at 13:21

I would use a wrapper around the existing divs and define a flexbox for it.

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10%;
}

.desc {
  color: skyblue;
}

<div class="container">
  <div class="desc">
    <h2>What we are here to do!</h2>
    <p>Example</p>
  </div>
  <div class="desc">
    <h2>What we have completed</h2>
    <p>Recent work (can include pictures)</p>
  </div>
  <div class="desc">
    <h2>Company Description</h2>
    <p>EXAMPLE!</p>
  </div>
</div>

It will work not so good because we can here different width of elements jsfiddle.net/uqr20k64/1 `space-between` just adds equal spaces between elements. This property doesn't care about equality of elements. — Vadim Ovchinnikov, Jul 28 '17 at 13:39

score 0 · Answer 8 · answered Jul 28 '17 at 13:24

0

Try this .

    body{
      width:900px;
      align-items:center;
      margin:0 auto;
      }

I think it's helps to you.

answered Jul 28 '17 at 13:24

score 0 · Answer 9 · answered Jul 28 '17 at 13:27

You can use flexbox for this and define styles for your body or wraps this blocks in container. No need for float here. Demo:

body {
  /* become a flex-container */
  display: flex;
  /* vertically center flex-items */
  align-items: center;
  /* centering for text, optional here */
  text-align: center;
  
  /* occupy all height */
  margin: 0;
  height: 100vh;
}

/* equal width for children */
body > * {
  flex: 1;
}

.desc {
  color: skyblue;
}

.desc1 {
  color: skyblue;
}

.desc2 {
  color: skyblue;
}

<div class="desc1">
  <h2>What we are here to do!</h2>
  <p>Example</p>
</div>
<div class="desc2">
  <h2>What we have completed</h2>
  <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>

score 0 · Answer 10 · edited Jan 22 '18 at 12:06

If you dont have to use the float you can simply remove the floats and enclose all your divs in a main div which alligns all text to center:

.desc {
  color: skyblue;
}

.desc1 {
  color: skyblue;
}

.desc2 {
  color: skyblue;
}
.div1{
  text-align:center;
}

<div class="div1" >
<div class="desc1">
  <h2>What we are here to do!</h2>
  <p>Example</p>
</div>
<div class="desc2">
  <h2>What we have completed</h2>
  <p>Recent work (can include pictures)</p>
</div>
<div class="desc">
  <h2>Company Description</h2>
  <p>EXAMPLE!</p>
</div>
</div>

I'm trying to center text in the middle of my page HTML

10 Answers10