Вертикально центрировать содержимое внутри встроенного родителя - PullRequest
Новая
       53

Вертикально центрировать содержимое внутри встроенного родителя

1 голос
/ 29 апреля 2020

Попытка создать адаптивную мета-запись для почтовой открытки.

Идея состоит в том, что иногда мета-запись может иметь более одной категории внутри, и из-за этого мне нужно как-то обернуть элементы, но в в то же время для вертикального центрирования контента li (например, аватара и значков).

Я пытался применить display: inline-flex к .entry-meta, чтобы иметь возможность использовать свойство align-items: center, но в этом случае элементы списка - li больше не переносятся, как при применении display: inline к li.

1. Метод display: inline (без центрирования элементов по вертикали)

Этот метод корректно выполняет перенос и определяет, как мне нужны все элементы списка, но он не может центрировать по вертикали содержимое (например, аватар и значки) 

article {
  max-width: 450px;
  background: #eee;
  font-family: arial;
  font-size: 12px;
  text-transform: uppercase;
}

article a {
  text-decoration: none;
}

.entry-meta {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-meta li {
  display: inline;
  margin-right: 10px;
  background: #ccc;
}

.avatar {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: #FA7059;
}

.icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #BE4C4E;
}
<article>		
	<ul class="entry-meta">

		<li class="author">
			<div class="avatar">
			</div>
			
			<span>By&nbsp;</span>

			<a href="#">Admin</a>
		</li>

		<li class="date">
			<span>On&nbsp;</span>
			<time>Feb 22, 2019</time>
		</li>

		<li>
			<span>On&nbsp;</span>
			<a href="#">2 Comments</a>
		</li>

		<li class="categories">
			<span class="icon">
			</span>

			<a href="#">Food</a>
			<a href="#">Nature</a>
			<a href="#">People</a>
			<a href="#">Travel</a>
			<a href="#">Trends</a>
			<a href="">Business</a>
			<a href="">Sport</a>
			<a href="">Music</a>
			<a href="">Gadgets</a>
			<a href="#">Uncategorized</a>
		</li>

		<li class="tags">
      <span class="icon">
			</span>
      
			<a href="">Red</a>
			<a href="">Blue</a>
			<a href="">Green</a>
			<a href="">Yellow</a>
		</li>

	</ul>
</article>

2. Метод display: inline-flex

Категория li перенесена неправильно, она разрывается на новую строку, но взамен содержимое центрируется по вертикали, как мне нужно. 

article {
  max-width: 450px;
  background: #eee;
  font-family: arial;
  font-size: 12px;
  text-transform: uppercase;
}

article a {
  text-decoration: none;
}

.entry-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.entry-meta li {
  margin-right: 10px;
  background: #ccc;
  
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.avatar {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: #FA7059;
}

.icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #BE4C4E;
}
<article>		
	<ul class="entry-meta">

		<li class="author">
			<div class="avatar">
			</div>
			
			<span>By&nbsp;</span>

			<a href="#">Admin</a>
		</li>

		<li class="date">
			<span>On&nbsp;</span>
			<time>Feb 22, 2019</time>
		</li>

		<li>
			<span>On&nbsp;</span>
			<a href="#">2 Comments</a>
		</li>

		<li class="categories">
			<span class="icon">
			</span>

			<a href="#">Food</a>
			<a href="#">Nature</a>
			<a href="#">People</a>
			<a href="#">Travel</a>
			<a href="#">Trends</a>
			<a href="">Business</a>
			<a href="">Sport</a>
			<a href="">Music</a>
			<a href="">Gadgets</a>
			<a href="#">Uncategorized</a>
		</li>

		<li class="tags">
      <span class="icon">
			</span>
      
			<a href="">Red</a>
			<a href="">Blue</a>
			<a href="">Green</a>
			<a href="">Yellow</a>
		</li>

	</ul>
</article>

Итак, другими словами, мне нужно каким-то образом сохранить элементы списка для переноса, как они есть с display: inline, но в то же время центрировать содержимое по вертикали внутри.

PS свойство vertical-align: middle не очень помогает:)

1 Ответ

0 голосов
/ 29 апреля 2020

PS свойство вертикального выравнивания: среднего не очень помогает:)

Это действительно то, что вам нужно (применяется к .avatar) 

article {
  max-width: 450px;
  background: #eee;
  font-family: arial;
  font-size: 12px;
  text-transform: uppercase;
}

article a {
  text-decoration: none;
}

.entry-meta {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-meta li {
  display: inline;
  margin-right: 10px;
  background: #ccc;
}

.avatar {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: #FA7059;
  vertical-align:middle;
}

.icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #BE4C4E;
}
<article>		
	<ul class="entry-meta">

		<li class="author">
			<div class="avatar">
			</div>
			
			<span>By&nbsp;</span>

			<a href="#">Admin</a>
		</li>

		<li class="date">
			<span>On&nbsp;</span>
			<time>Feb 22, 2019</time>
		</li>

		<li>
			<span>On&nbsp;</span>
			<a href="#">2 Comments</a>
		</li>

		<li class="categories">
			<span class="icon">
			</span>

			<a href="#">Food</a>
			<a href="#">Nature</a>
			<a href="#">People</a>
			<a href="#">Travel</a>
			<a href="#">Trends</a>
			<a href="">Business</a>
			<a href="">Sport</a>
			<a href="">Music</a>
			<a href="">Gadgets</a>
			<a href="#">Uncategorized</a>
		</li>

		<li class="tags">
      <span class="icon">
			</span>
      
			<a href="">Red</a>
			<a href="">Blue</a>
			<a href="">Green</a>
			<a href="">Yellow</a>
		</li>

	</ul>
</article>
...