CODEWITHSUNDEEP
htmlcss
Clarke Cribb
Clarke Cribb

Reputation: 269

align text to the center of the page

I have some text in a container which needs to be in the center of the page - both horizontally and vertically. As I need it to scale down I have set up a JSFiddle here

HTML:

<div class="projectsimageswrap">
    <div class="project projectimg1" style="width: 100%; background-color:rgb(127,127,127);">
      <div id="thebrief">
        <h4>The Brief</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a quam dapibus, dictum nunc eget, porttitor mauris. Mauris tempor lectus nisi. Vivamus pharetra magna risus. Praesent dignissim maximus libero. Aliquam imperdiet velit eu lacus tristique, vitae mattis dui tempor. Nam varius odio efficitur, mattis ex id, rutrum mi. Vestibulum sollicitudin at tellus non iaculis. Curabitur eu velit lectus. Curabitur molestie turpis vitae arcu ultrices, in porttitor leo posuere. Etiam sed imperdiet risus, id elementum augue. Ut euismod tincidunt eros dapibus iaculis.

      Ut eget viverra odio, sed varius augue. Donec eu nisl vitae velit sagittis maximus eu vitae orci. Pellentesque sed nisi congue, luctus ante sit amet, scelerisque nisi. Sed ac ipsum eros. Proin ut arcu ac risus elementum vulputate. Suspendisse tincidunt varius lectus et pulvinar. Mauris vehicula ex diam, vel hendrerit mauris egestas eget. Aenean vulputate, turpis mollis condimentum maximus, sem purus venenatis enim, a luctus eros nulla et ligula. Aliquam porta mauris in fringilla tempor. Fusce a laoreet nibh. Aliquam vehicula eget justo at scelerisque. Integer eget dui eros. Nulla et congue sem.</p>
    </div>
</div>

CSS:

.projectsimageswrap {
    margin:0 auto;
    background-color: rgb(247,200,198);
    position: absolute;
    top: 100%;
    width:100%;
}

.projectsimageswrap .project {
    width:50%;
    padding-bottom:50%;
    margin:0;
    float:left;
    background:rgb(204,234,236);
    position: relative;

}

/*style for the briefs*/

#thebrief{
    position: absolute;
    margin: auto;
    width: 300px;

}

Upvotes: 1

Views: 70

Answers (4)

Steevan
Steevan

Reputation: 826

You can add the below code.

 #thebrief{
    position: relative;
    margin: auto;
    width: 300px;
    text-align:center;

}

Fiddle

Upvotes: 1

Pete
Pete

Reputation: 58422

You can vertically and horizontally center things using these lines of css:

position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width: 300px;

Example

Upvotes: 2

Mehdi Brillaud
Mehdi Brillaud

Reputation: 1866

The way you did it is very weird. But if you need to center all the content horizontally, you need to add text-align center to #thebrief and to center #thebrief itself. Since you use position:absolute, you need to set left to 50% and translate it on the x axis to -50%. Example :

.projectsimageswrap {
  margin: 0 auto;
  background-color: rgb(247, 200, 198);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.projectsimageswrap .project {
  width: 50%;
  padding-bottom: 50%;
  margin: 0;
  float: left;
  background: rgb(204, 234, 236);
  position: relative;
}
/*style for the briefs*/

#thebrief {
  position: absolute;
  width: 300px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  text-align: center;
}
<div class="projectsimageswrap">
  <div class="project projectimg1" style="width: 100%; background-color:rgb(127,127,127);">
    <div id="thebrief">
      <h4>The Brief</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a quam dapibus, dictum nunc eget, porttitor mauris. Mauris tempor lectus nisi. Vivamus pharetra magna risus. Praesent dignissim maximus libero. Aliquam imperdiet velit eu lacus tristique,
        vitae mattis dui tempor. Nam varius odio efficitur, mattis ex id, rutrum mi. Vestibulum sollicitudin at tellus non iaculis. Curabitur eu velit lectus. Curabitur molestie turpis vitae arcu ultrices, in porttitor leo posuere. Etiam sed imperdiet
        risus, id elementum augue. Ut euismod tincidunt eros dapibus iaculis. Ut eget viverra odio, sed varius augue. Donec eu nisl vitae velit sagittis maximus eu vitae orci. Pellentesque sed nisi congue, luctus ante sit amet, scelerisque nisi. Sed ac
        ipsum eros. Proin ut arcu ac risus elementum vulputate. Suspendisse tincidunt varius lectus et pulvinar. Mauris vehicula ex diam, vel hendrerit mauris egestas eget. Aenean vulputate, turpis mollis condimentum maximus, sem purus venenatis enim,
        a luctus eros nulla et ligula. Aliquam porta mauris in fringilla tempor. Fusce a laoreet nibh. Aliquam vehicula eget justo at scelerisque. Integer eget dui eros. Nulla et congue sem.</p>
    </div>
  </div>
</div>

Upvotes: 0

Arshid KV
Arshid KV

Reputation: 10037

Just add text-align:center for div class in css file.

In your case add position relative for #thebrief

 #thebrief{
    position: relative;
    margin: auto;
    width: 300px;
}

Upvotes: 1

Related Questions