Как выровнять текст в середине экрана

-2

Я хочу выровнять текст в середине экрана. У меня есть контент и кнопка в элементе div, который я хочу отображать в середине экрана.Как выровнять текст в середине экрана

В данный момент текст отображается под элементом div.

У меня есть три баннера и 3 контента.

Я хочу выровнять текст по центру как по вертикали, так и по горизонтали.

jQuery(document).ready(function() { 
 
\t var headerheight = jQuery("#header-wrapper").height(); 
 
\t jQuery(".view-home-banner .views-row-1 .panell img").css("margin-top",headerheight+"px"); 
 
\t jQuery(".banner_img img").addClass("img-responsive"); 
 
});

#navigation 
 
{ 
 
\t display:none; 
 
} 
 
.feed-icon 
 
{ 
 
\t display:none; 
 
} 
 
/*banner*/ 
 
#home_banner .home-banner { 
 
\t position: relative; 
 
\t width: 100%; 
 
    color:black; 
 
} 
 
.banner_description p { font-weight: bold;word-spacing:5px;margin:1%} 
 
.banner_link { 
 
\t font-size: 28pt 
 
     
 
\t text-align: center; 
 
\t border-bottom-left-radius: 5px; 
 
\t border-bottom-right-radius: 5px; 
 
\t } 
 
.banner_description { 
 
\t 
 
\t font-size: 33pt; 
 
\t font-weight: bold; 
 
    color: black; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    \t text-align:center; 
 
\t 
 
} 
 
.banner_link a { 
 
\t color: white; 
 
    text-transform: uppercase; 
 
\t font-weight: normal; 
 
\t background-position:1%; 
 
\t padding:0.5% 1.5%; 
 
\t background-color:#5d145f; 
 
\t font-size:17pt; 
 
\t opacity:0.8; 
 
} 
 
.background-image-formatter { 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
background-position: center; 
 
\t min-height: 100vh; 
 
} 
 
.home-banner-background 
 
{ 
 
\t position:absolute; 
 
\t width:100%; 
 
\t height:auto; 
 
\t border-radius:2%; 
 
\t opacity:0.9; 
 
} 
 
/*.banner_img > img{ 
 
    /*float: right; 
 
    max-width: 100%; 
 
    height: auto; 
 
min-height: 100vh; 
 
} 
 
.banner_img > img { 
 
    max-height: 1024px; 
 
    min-width: 1024px; 
 
} 
 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="views-row views-row-1 views-row-odd views-row-first classtest"> 
 
    <section class="panell" style="height: 543px;"> 
 
     <span class="field-content banner_img"><div class="background-image-formatter" style="background-image: url('data:image/jpeg;base64,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')"> 
 
    &nbsp; 
 
</div> 
 
</span> \t \t <div class="home-banner-background"> 
 
     <div class="field-content banner_description"><p>We built great software products</p> 
 
</div> \t <div class="field-content banner_link"><a href="#">Explore</a></div> \t </div> 
 
\t  </section> 
 
\t  
 
</div>

источник

2017-02-11 user3386779

Я не понимаю, в чем проблема, в скрипте текст находится посередине экрана с помощью 'text-align: center'. Разве это не то, что вы хотите? –

Я хочу выровнять вертикальную высоту. – user3386779

Тогда, пожалуйста, укажите, что в вопросе не ясно, что вы хотите, читая его. –

Если вы хотите, чтобы выровнять DIV в середине экрана, вы можете установить margin : 0, auto; и width:50%; для CSS из div.This является известный CSS trick.Btw, ваш вопрос путается и, пожалуйста, уменьшите содержание вопроса до минимума.

Edit: Основываясь на комментарий, который был оставлен, вы пытаетесь выровнять по горизонтали и vertically.You можно сделать следующее:

div { 

    transform: translateX(-50%) translateY(-50%); 
    top: 50%; 
    left: 50%; 
    position: absolute; 
}

Это dynamiclly выровнять element.From Mozilla Разработчики:

translatex() 
The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a <length> defining how much it moves horizontally. 
translateX(tx) is a shortcut for translate(tx, 0). 
translatey() 
The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a <length> defining how much it moves vertically. 
translateY(ty) is a shortcut for translate(0, ty).

подробнее о функции преобразования here.

источник

2017-02-11 05:49:55

это не ответ, он хочет выровнять что-то горизонтально и вертикально! –

Если вы хотите чтобы сделать текстовый центр горизонтально, тогда вы можете использовать text-align:center, если вы хотите сделать это varticaly, вы можете использовать line-height. вы дали height:543px к sectionso вам нужно написать

line-height:543px ;

здесь обновляется скрипку https://jsfiddle.net/1mh33zz7/

источник

2017-02-11 06:28:38 shyamm

div { 
 
    position: absolute; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    top: 50%; 
 
    left: 50%; 
 
}

или

div{ 
 
    
 
    text-align:center; 
 
justify-content: center; 
 
    align-items: center; 
 
    }

источник

2017-02-11 06:39:09

Как выровнять текст в середине экрана

ответ

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