Search code examples
csstext-align

text-align / align-content doesnt work

I've been trying and trying to get this to work. But no matter what I try, I can't get this to show up in the center.

I searched stackoverflow. I tried margin: 0 auto; and tried removing floating elements. But nothing seems to work.

I must be missing something simple. I'm not very knowledgeable about CSS. Could you please point it out?

body {
  align-content: center;
  text-align: center;
  background-image: url(images/marble.gif);
  margin: 0 auto;
}
#about {
  align-content: center;
  text-align: center;
  width: 700px;
}
#about img {
  align-content: center;
  text-align: center;
  border-right: black thick solid;
  border-top: black thick solid;
  border-left: black thick solid;
  border-bottom: black thick solid;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  margin: 3px;
  padding-top: 0px;
}
#myPicture p {
  align-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 11pt;
}
#myName p {
  align-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 24pt;
  clear: both;
  margin-top: 15px;
}
<div id="about">
  <div id="myPicture">
    <p>&nbsp;</p>
    <p>
      <img src="images/profile2.jpg" />
    </p>
  </div>

  <div id="myName">
    <p>Dude</p>
  </div>

  <div id="myTitles">
    <div class="myTitleClass">
      <p>...
    </div>
  </div>

Solution

  • You have centered the image and the text inside div#about which is 700px wide, but the div#about itself is not centered. I added background-color: orange; to the div, so you can see what's happening here:

    enter image description here

    All you have to do is add margin: 0 auto; to div#about and you'll get this:

    enter image description here

    It's centered now. You can get rid of orange background. Also I've shorten your CSS, check this:

    body {
    margin: 0;
}
#about {
  width: 700px;
  background-color: orange;
  margin: 0 auto;
}
#about img {
  border: black thick solid;
  padding: 0;
  margin: 3px;
}
#myPicture p {
  text-align: center;
}
#myName p {
  text-align: center;
  font-weight: bold;
  font-size: 24pt;
  margin-top: 15px;
}
    <div id="about">
    
  <div id="myPicture">
    <p>&nbsp;</p>
    <p>
      <img src="images/profile2.jpg" />
    </p>
  </div>

  <div id="myName">
    <p>Dude</p>
  </div>

</div>