CSS: Align text vertically and horizontally?

Question

https://i.stack.imgur.com/ffLj8.jpg

This is what I am trying to achieve. But I for some reason I can't get it right, this is what I currently have:

https://i.stack.imgur.com/MHcuD.jpg

Here is my code:

.blog-lockup
  max-width: 1000px
  margin: 0 auto
  
  .image
   position: relative
   +size(250px)
   
   img
    +size(250px)
    
   strong
    position: absolute
    top: 60%
    left: 0%
    +size(70px)
    text-align: center
    background: $lightred-color
    
    font-family: Verdana
    font-size: 14px
    font-weight: 400
    font-style: italic
    
    color: #FFF

<div class="blog-lockup">
 
  <div class="blog-1">

   <div class="image">
    <img src="../assets/img/blog/blog-1/thumb.jpg">
    <strong>04 SEP</strong>
   </div>
   
   <h5>Some Title Text with Love</h5>
   <p class="author">by James Vibar</p>
   
   <p>At vero eos et accusamus et iusto odio dignissimos
   ducimus qui blanditis praesantium voluptatum deleniti
   atque corrupti qtios dolores et quas molestias excepturi
   sint occaecati cupiditate non provident</p>
   
   <a href="#">Read More</a>
  
  </div>
  </div>

I'm using sass btw.

Hi, I'm sorry. It's my first time asking a question and I am not currently well knowledged. EDITED — James Vibar, Sep 04 '15 at 05:59

score 1 · Accepted Answer · answered Sep 04 '15 at 05:54

The safest approach to this would be avoiding using CSS3 if you have to support old browsers. This method should work across all browsers.

CSS-Tricks wrote an article on it. https://css-tricks.com/centering-in-the-unknown/

.date-container{            <-- Your Red Box
  display: table;           <-- Set the Container to Display Table

  .date{
    display: table-cell;    <-- Set the Date to Display Table-Cell
    text-align: center;     <-- Align Text Center
    vertical-align: middle; <-- Set Vertical Alignment to Middle

    padding: 40px;          <-- Adjust Accordingly

  }
}

Check out the pen: http://codepen.io/luisreyes/pen/pjvrMj

score 0 · Answer 2 · answered Sep 04 '15 at 05:39

0

If it is one line of text and/or image, then it is easy to do. Just use

text-align: center;
vertical-align: middle;
line-height: 90px;

See Demo:DEMO PAGE

answered Sep 04 '15 at 05:39

Ivin Raj

3,448
2
28
65

score 0 · Answer 3 · answered Sep 04 '15 at 05:40

text align vertically by this

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

for aligning horizontally just use

.parentelement{
 text-align:center;
}

refer this,also for breaking your sentence you can use "br tag"

score 0 · Answer 4 · edited Sep 04 '15 at 07:45

0

.colored-box{

        background-color:blue;
        padding:10px 20px 10px 20px;
        margin-left:10px;
        position:absolute;
        bottom:150px;
        text-align:center;
}

See here

edited Sep 04 '15 at 07:45

teo van kot

12,350
10
38
70

answered Sep 04 '15 at 07:42

user5299774

1
1

CSS: Align text vertically and horizontally?

4 Answers4