Почему «text-align: center» не является вертикально центрирующими элементами? - PullRequest
0 голосов
/ 08 февраля 2019

Почему текст не выравнивается по центру при размещении изображения в li?Если я удаляю img, текст центрируется.Я пытаюсь добиться того, чтобы оба были в центре.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li>
    <span class="text">Home</span>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII="/>
  </li>
  <li>
    <span class="text">News</span>
  </li>
</ul>

</body>
</html>

Ответы [ 4 ]

0 голосов
/ 08 февраля 2019

Существует несколько способов достижения вертикального и горизонтального выравнивания.

Flex

Как объяснил @ AndrewL64, вы можете использовать flex и использовать свойство align-items для center элемент.Это более современный подход, наиболее рекомендуемый для создания адаптивного макета.

Блок

Можно установить для свойства display элемента значение block и использовать margin: 0 auto для центрирования.элемент по вертикали и горизонтали.

Inline-block / inline

Или вы можете установить для свойства display элемента значение inline-block или inline, при котором вы можете использовать text-align: center собственность.Важно отметить, что это свойство действует только на внутреннее содержимое контейнеров block и влияет только на элементы inline или inline-block.

В этой статье Сары Коуп хорошо объясняетсямеханика таких свойств

0 голосов
/ 08 февраля 2019

Свойство text-align используется для выравнивания элементов по горизонтали, а не по вертикали.

Просто измените элемент <ul> на flexbox, используя display: flex;, а затем используйте свойство align-items для вертикального центрирования<li> предметов.Аналогичным образом измените элементы <li> на flexbox и используйте это же свойство для вертикального центрирования текста и значка.

Также вам необходимо изменить селектор css li hover на li:hover.


Проверьте и запустите следующий Фрагмент кода для практического примера выше:

ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
}

li {color: white;text-decoration: none;
  display: flex;
  align-items: center;
}

li:hover {background-color: #111;}
<ul>
  <li>
  	Home
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=" />
  </li>
  <li>News</li>
</ul>
0 голосов
/ 08 февраля 2019

, если вы хотите центрировать изображение, используйте:

img{
 margin: auto;
}

, затем отцентрируйте текст, используя

text-align: center;
0 голосов
/ 08 февраля 2019

На самом деле изображение также центрируется как часть текста, потому что элементы img по умолчанию отображаются встроенными.

В зависимости от вашей цели у вас может быть img самостоятельно li или расположите их абсолютно так:

li {
  position: relative;
  padding-left: 30px;
}
li img{
  position: absolute;
  left: 0;
}

https://jsfiddle.net/01ecvxfp/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...