Не удается разместить текст

-1

Я выровнял по центру текст, а затем позиционировал его сверху: 20%. Он работал нормально, но когда я добавил абзац под ним, элемент просто вернулся в начальную позицию (верх: 20% не вступили в силу).Не удается разместить текст

<style> 
    .yes{ 
      width : 100%; 
      height : 50%; 
      background-color: red; 
      text-align: center; 
     } 
     .yes a{ 
      font-size : 300%; 
      position: relative; 
      top : 20%; 
     } 
    </style> 

    <div class = "yes"> 
    <a>Title</a> 
    <p></p></div>

Update: По какой-то причине на jsfiddle, то DIV не отображается как высота 50% и, таким образом, это трудно понять эту проблему, я имею в виду тоже. Вот ссылка для просмотра кода. Просто удалите тег p, чтобы увидеть эффект: http://liveweave.com/owjs3W#&togetherjs=xwdArBqd5t

источник

2017-01-28 Ash

Сделать скрипку. Я не мог повторить его с вашим кодом. –

Я думаю, что 'top: 20%' вступят в силу, когда вы установите 'display: block;' для '.yes a' – Banzay

@ shukshin.ivan Когда я создаю скрипку, div не займет 50% экран. Так что это не вступает в силу. – Ash

Как это подтвердить и подтвердить? Следующий снипп отлично работает в последнем Chrome. Заголовок не перемещается после добавления абзаца.

UPD. Описанную ситуацию можно повторить с высокой упаковкой. Поэтому решение состоит в том, чтобы сделать adisplay до block.

.wrp{height:400px;} 
 
    .yes{ 
 
      width : 100%; 
 
      height : 50%; 
 
      background-color: red; 
 
      text-align: center; 
 
     } 
 
     .yes a{ 
 
      display:block; 
 
      font-size : 300%; 
 
      position: relative; 
 
      top : 20%; 
 
     }

<div class="wrp"> 
 
    <div class="yes"> 
 
     <a>Title</a> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="wrp"> 
 
    <div class="yes"> 
 
     <a>Title</a> 
 
     <p></p> 
 
    </div> 
 
</div>

источник

2017-01-28 23:13:06

Спасибо! Это, похоже, это и сделало. Разум, объясняющий, какой дисплей: блок делает? Я довольно новичок в этом. – Ash

Это хороший вопрос * почему элемент 'inline' ведет себя как' block', когда он один в div. Стоит это знать. –

-1

Вы должны инкапсулировать стиль внутри тега класса, а не тег id.

<html> 
<head> 
    <style> 
     .yes{ 
      width : 100%; 
      height : 50%; 
      background-color: red; 
      text-align: center; 
     } 
     .yes a{ 
      font-size : 300%; 
      position: relative; 
      top : 20%; 
     } 
    </style> 
</head> 
<body> 
    <div class="yes"> 
     <a>Title</a> 
     <p></p> 
    </div> 
</body> 
</html>

see it in action

Разница заключается в следующем: Id должен быть уникальным и быть установлен только один элемент на документе. Классы могут быть установлены в несколько элементов в Dom.

источник

2017-01-28 23:05:57 takethefake

* «не тег id» * - Какой тег «id»? Я не вижу '#' или 'id =" x "' в своем коде. –

вам нужно удалить все, что касается идентификатора. –

теперь я заметил, что это был слишком длинный день: D – takethefake

Не удается разместить текст

ответ

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