CODEWITHSUNDEEP
htmlcss
joekazmac
joekazmac

Reputation: 31

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

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>

Upvotes: 2

Views: 153

Answers (10)

Vincent Colpa
Vincent Colpa

Reputation: 11

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>

Upvotes: 0

JamesSkinner12
JamesSkinner12

Reputation: 23

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

Upvotes: 0

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14032

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>

Upvotes: 0

user8109132
user8109132

Reputation:

Try this .

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

I think it's helps to you.

Upvotes: 0

Ahmad
Ahmad

Reputation: 455

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 :)

Upvotes: 0

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 0

Louis &#39;LYRO&#39; Dupont
Louis &#39;LYRO&#39; Dupont

Reputation: 1112

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.

Upvotes: 0

BoffinBrain
BoffinBrain

Reputation: 6535

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.

Upvotes: 0

Padma Rubhan
Padma Rubhan

Reputation: 293

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>

Upvotes: 1

Victor Allegret
Victor Allegret

Reputation: 2404

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;
}

Upvotes: 6

Related Questions