центр содержимое внутри формы HTML

Это то, что я получаю [1]: http://i.stack.imgur.com/TGQiR.png центр содержимое внутри формы HTML

Я хочу, чтобы это как этот [2]: http://i.stack.imgur.com/Mu7g5.png

Вот мой код, это файл CSS.

.shape{ 
    width:200px; 
    height:250px; 
    color:#4F5E73; 
    margin:20px auto; 
    background-color:rgb(236, 236, 236); 
    text-align:center; 
}

Вот как я показываю форму и текст.

<div class="shape"> 
    <span style="font-size:72px;"> 7 </span> <br /> 
    <span style="font-size:18px;"> minutes to Applecross High School </span> <br /> 
</div>

источник

2016-07-20 Jalon Juanis

вы хотите выровнять его по вертикали ли? – Sergej

Попробуйте добавить отступы к .shape и выровнять все в центре и в нашей назначен height и width, так для этого мы включили box-sizing:border-box; это говорит браузеру заполнители внутри элемента height и width (т. е. overe-here is .shape).

.shape { 
 
    width:210px; 
 
    height:250px; 
 
    color:#4F5E73; 
 
    background-color:rgb(236, 236, 236); 
 
    text-align:center; 
 
    padding:50px; 
 
    box-sizing:border-box; 
 
}

<div class="shape"> 
 
    <span style="font-size:72px;"> 7 </span> 
 
    <span style="font-size:18px;"> minutes</span><br> 
 
    <span>to Applecross High</span> 
 
    <span>School </span> 
 
</div>

источник

2016-07-20 07:50:21 frnt

спасибо! что действительно помогает, его работе. –

Добро пожаловать @JalonJuanis :-) – frnt

@JalonJuanis Примите ответ, если приведенный выше код помог вам. – frnt

Для современных браузеров вы можете использовать flex. CSS:

.shape{ 
     display:flex; 
     align-items: center; 
     width:200px; 
     height:250px; 
     color:#4F5E73; 
     margin:20px auto; 
     background-color:rgb(236, 236, 236); 
     text-align:center; 
    }

вы должны использовать некоторые резервные объявления для -webkit- и так далее

источник

2016-07-20 07:39:39

Благодарю вас, его работа, но контент смешанный, как я могу отделить его две строки? Я хочу, чтобы номер был заголовком. –

просто добавьте следующее к вашему css: '.shape span {display: block; } ' –

HTML:

<div class="shape"> 
    <div class="vert-align"> 
    <span style="font-size:72px;"> 7 </span> <br /> 
    <span style="font-size:18px;"> minutes to Applecross High School </span> <br /> 
    </div> 
</div>

CSS:

.shape { 
    width: 200px; 
    height: 250px; 
    color: #4F5E73; 
    margin: 20px auto; 
    background-color: rgb(236, 236, 236); 
    text-align: center; 
} 
.shape .vert-align { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

источник

2016-07-20 07:44:45 SamAI

Если вы хочу солю ции, которая поддерживается во всех браузерах сделать STH так:

HTML

<div class="shape"> 
    <div class="shape__inner"> 
    <span style="font-size:72px;">7</span> 
    <span style="font-size:18px;">minutes to Applecross High School</span> 
    </div> 
</div>

CSS

.shape { 
    width:200px; 
    height:250px; 
    color:#4F5E73; 
    margin:20px auto; 
    background-color:rgb(236, 236, 236); 
    text-align:center; 
} 

.shape__inner { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Проверить рабочий пример here

источник

2016-07-20 07:45:08

This jsFiddle может быть возможным решением вашей проблемы.

.shape { 
 
    width: 200px; 
 
    height: 250px; 
 
    color: #4F5E73; 
 
    margin: 20px auto; 
 
    background-color: rgb(236, 236, 236); 
 
    text-align: center; 
 
} 
 
    
 
span { 
 
    position: relative; 
 
    top: 20%; 
 
}

<div class="shape"> 
 
    <span style="font-size:72px;"> 7 </span> 
 
    <br /> 
 
    <span style="font-size:18px;"> minutes to Applecross High School </span> 
 
    <br /> 
 
</div>

источник

2016-07-20 07:49:57 reshad

Это работа, это ответ.

.shape { 
 
    width:210px; 
 
    height:250px; 
 
    color:#4F5E73; 
 
    background-color:rgb(236, 236, 236); 
 
    text-align:center; 
 
    padding:50px; 
 
    box-sizing:border-box; 
 
}

<div class="shape"> 
 
    <span style="font-size:72px;"> 7 </span> 
 
    <span style="font-size:18px;"> minutes</span><br> 
 
    <span>to Applecross High</span> 
 
    <span>School </span> 
 
</div>

источник

2016-07-20 09:46:09

центр содержимое внутри формы HTML

ответ

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