主页 / 问题 / 788596
Accepted
Tick-Tack
Asked:2020-02-22 05:22:33 +0000 UTC2020-02-22 05:22:33 +0000 UTC

将块对齐到父级的中心

  • 772

有这样的结构HTML：

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

.listOfProperties li {
  font-size: 27.5px;
  height: 70px;
  font-family: "Dosis", sans-serif;
  text-decoration: none;
  color: red;
  padding-left: 40px;
}

.listOfProperties li:hover {
  background: #1c1c1c;
}

.listOfProperties li img {
  width: 35px;
  height: 35px;
  padding-right: 35px;
  vertical-align: bottom;
}
<div class="sidebar-buttons">
  <ul class="listOfProperties">
    <li class="withdraw"><img src="https://via.placeholder.com/50x50"><span>WITHDRAW</span></li>
    <li class="servise"><img src="https://via.placeholder.com/50x50"><span>RULES OF SERVISE</span></li>
    <li class="settings"><img src="https://via.placeholder.com/50x50"><span>SETTINGS</span></li>
  </ul>
</div>

将鼠标悬停在列表的其中一个元素上时，它必须像图片中一样（即，将图片和铭文降低到中心）。你能告诉我如何对齐吗？我找不到有关此的任何信息（我将感谢文献）

在此处输入图像描述

html

2 个回答

  1. Best Answer

    对于 li 你可以使用 display: flex; 对齐项目：居中；

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

.listOfProperties li {
  font-size: 27.5px;
  height: 70px;
  font-family: "Dosis", sans-serif;
  text-decoration: none;
  color: red;
  padding-left: 40px;
  display: flex;
  align-items: center;
}

.listOfProperties li:hover {
  background: #1c1c1c;
}

.listOfProperties li img {
  width: 35px;
  height: 35px;
  padding-right: 35px;
  vertical-align: bottom;
}
    <div class="sidebar-buttons">
  <ul class="listOfProperties">
    <li class="withdraw"><img src="https://via.placeholder.com/50x50"><span>WITHDRAW</span></li>
    <li class="servise"><img src="https://via.placeholder.com/50x50"><span>RULES OF SERVISE</span></li>
    <li class="settings"><img src="https://via.placeholder.com/50x50"><span>SETTINGS</span></li>
  </ul>
</div>

    • 2

  2. display您也可以使用align-items. 并为您需要的部分添加一个类

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

.listOfProperties li {
  font-size: 27.5px;
  height: 70px;
  font-family: "Dosis", sans-serif;
  text-decoration: none;
  color: red;
  padding-left: 40px;
}

.listOfProperties li:hover {
  background: #1c1c1c;
}

.listOfProperties li img {
  width: 35px;
  height: 35px;
  padding-right: 35px;
  vertical-align: bottom;
}

.vertical {
  display: flex;
  align-items: center;
}
    <div class="sidebar-buttons">
  <ul class="listOfProperties">
    <li class="vertical withdraw"><img src="https://via.placeholder.com/50x50"><span>WITHDRAW</span></li>
    <li class="vertical servise"><img src="https://via.placeholder.com/50x50"><span>RULES OF SERVISE</span></li>
    <li class="vertical settings"><img src="https://via.placeholder.com/50x50"><span>SETTINGS</span></li>
  </ul>
</div>

    • 1

相关问题