CSS：垂直和水平对齐文本？

http://i.stack.imgur.com/ffLj8.jpg CSS：垂直和水平对齐文本？

这就是我想要实现的。但我由于某种原因，我无法得到它的权利，这就是我目前有：

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

这里是我的代码：

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

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

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

我使用sass btw。

来源

2015-09-04 James Vibar

请运行文件中的jsfiddle –

请把这里全有意义的代码 –

您好，我很抱歉。这是我第一次问一个问题，而且我目前还没有很好的认识。编辑 –

如果您必须支持旧浏览器，最安全的方法是避免使用CSS3。这种方法应该适用于所有浏览器。

CSS-Tricks写了一篇文章。 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 

    } 
}

退房笔： http://codepen.io/luisreyes/pen/pjvrMj

来源

2015-09-04 05:54:05 Luis

谢谢先生。很棒 –

如果它是一行文字和/或图像，那么很容易做到。只需使用

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

见演示：DEMO PAGE

来源

2015-09-04 05:39:17

文本通过这个

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

垂直对齐的水平对齐只需使用

.parentelement{ 
text-align:center; 
}

指this，也打破你的句子你可以使用“br标签”

来源

2015-09-04 05:40:08 harshitpthk

.colored-box{ 

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

见here

来源

2015-09-04 07:42:29 user5299774

CSS：垂直和水平对齐文本？

回答

相关问题