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 –

пожалуйста, поставить здесь весь смысл код –

Привет, мне очень жаль. Это мой первый вопрос, задающий вопрос, и я пока не знаю. EDITED –

Самым надежным подходом к этому было бы избежать использования 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 tag"

источник

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: выравнивать текст по вертикали и по горизонтали?

ответ

Смежные вопросы