Как остановить текст в div, выталкивающий другие разделы вниз по странице?

#css #html #alignment

#css #HTML #выравнивание

Вопрос:

Я хочу выровнять текст в моем div (‘что’ и ‘где’), но теперь, когда у меня есть текст внизу, он переместил разделы (search-field1 и searchfield2) дальше по странице!

Как я могу сделать так, чтобы текст не влиял на это? Это как-то связано с заполнением ячеек / интервалом?

Извините, я не лучший в CSS, я сам этому учусь.

HTML:

 <center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>

<center>
<div class="search-field1">

</div>
<div class="search-field2">

</div>
</center>

CSS:

 .what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;


}

.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;

}

.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}

.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}

Спасибо!

Джеймс

1. дважды проверьте свой html, у вас есть тег rogue <p>

2. Можете ли вы создать jsfiddle. подключитесь с вашим кодом, чтобы показать проблему?

3. Я не понимаю, в чем проблема, Джеймс. Можете ли вы объяснить это более понятными терминами? Вам действительно следует избегать использования center тега, если это возможно, и вместо этого использовать свойство CSS text-align: center; .

4. Извините, ребята, я удалил <p>. Все, что мне действительно нужно сейчас, это знать, как выровнять текст «что» и «где» внизу div. Как это делается? Я исследовал t, но, похоже, это не влияет на мой код

5. Было бы здорово, если бы вы могли нарисовать div так, как вам нужно, и опубликовать здесь. Итак, у других есть представление о том, что вам нужно

Ответ №1:

Джеймс, это то, что ты ищешь? http://jsfiddle.net/jkeyes/WFPK2

Установите высоту строки для ваших контейнеров (в данном случае .what и .where , чтобы она совпадала с высотой:

 line-height: 35px;

Ответ №2:

звучит так, как вам нужно float:left в ваших center тегах

Ответ №3:

HTML:

 <div class="center">
    <div class="what">what?</div>
    <div class="where">where?</div>
</div>

<div class="center">
    <div class="search-field1"></div>
    <div class="search-field2"></div>
</div>

CSS:
Если вы используете float:left для окружающего div, это позволит двум center div перемещаться бок о бок.

 .center {
    float:left;
}

Ответ №4:

Другим вариантом было бы установить высоту строки равной нулю в скрытом div вот так:

     line-height: 0px;

Затем добавьте отступы к окружающим разделам. Вот так:

     padding-top: 10px;

Надеюсь, это кому-то поможет.