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：垂直和水平對齊文本？

回答

相關問題