您如何使每个文本完美地显示在图像的中心？ [重复]

问题描述 投票：0回答：5

请看所有文字显示在图片下方。我希望每个文本都可以完美地显示在图片的中央。

以下是代码：https://jsfiddle.net/Krzysiek_35/Ljybwz97/37/

body {
  left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3 {
	background-color: #191919;
	position: absolute;
	padding: 15px 40px 15px;
	font-size: 12px;
	color: #DDDDDD;
	font-family: Verdana;
	font-size: 12px;
	width: 400px;
}

.box3 > li {
	display: block;
}

.box3 > li span {
	display: inline-block;
	vertical-align: middle;
}
<body>
  <div class="box3">      
    <li>
      <img src="pictures/contact/skype.png" width="34px" height="34px" />
	  <span>Skype name</span>
	</li>        
	<li>
      <img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
      <span>Gadu-Gadu number</span>
	</li>        
	<li>
      <img src="pictures/contact/email.png" width="34px" height="34px" />
      <span>Email address</span>
	</li>        
  </div>      
</body>

如何使每个文本完美地显示在图像的中心？

我将非常感谢您提供有效的帮助。

html css centering
5个回答
-1
投票
.box3 > li {
  display: flex;
  align-items: center;
}
0
投票

将vertical-align: middle设置为img：

body
{
	left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3
{
	background-color: #191919;
	position: absolute;
	padding: 15px 40px 15px;
	font-size: 12px;
	color: #DDDDDD;
	font-family: Verdana;
	font-size: 12px;
	width: 400px;
}

.box3 > li
{
	display: block;
}

.box3 > li span
{
	display: inline-block;
	vertical-align: middle;
}

.box3 img{
    vertical-align: middle;
}
<body>

	<div class="box3">
  
		<li>
			<img src="pictures/contact/skype.png" width="34px" height="34px" />
			<span>Skype name</span>
		</li>
    
		<li>
			<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
			<span>Gadu-Gadu number</span>
		</li>
    
		<li>
			<img src="pictures/contact/email.png" width="34px" height="34px" />
			<span>Email address</span>
		</li>
    
	</div>
  
</body>
-1
投票

在display: flex元素上设置li，并且将align-items设置为center

替换

.box3 > li
{
    display: block;
}

.box3 > li span
{
    display: inline-block;
    vertical-align: middle;
}

with

li {
  display: flex;
  align-items: center;
}


body {
  left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3 {
  background-color: #191919;
  position: absolute;
  padding: 15px 40px 15px;
  font-size: 12px;
  color: #DDDDDD;
  font-family: Verdana;
  font-size: 12px;
  width: 400px;
}

li {
  display: flex;
  align-items: center;
}
<body>

  <div class="box3">

    <li>
      <img src="pictures/contact/skype.png" width="34px" height="34px" />
      <span>Skype name</span>
    </li>

    <li>
      <img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
      <span>Gadu-Gadu number</span>
    </li>

    <li>
      <img src="pictures/contact/email.png" width="34px" height="34px" />
      <span>Email address</span>
    </li>

  </div>

</body>
-1
投票

您也可以使用此

.box3 > li span
{
display: inline-block;
vertical-align: middle;
margin-top:-30px;
}
-1
投票

很好，文本完美地显示在中间。

以下是代码：https://jsfiddle.net/Krzysiek_35/Ljybwz97/40/

body
{
	left: 8%;
  top: 10%;
  position: absolute;
  background-color: #6699cc;
}

.box3
{
	background-color: #191919;
	position: absolute;
	padding: 15px 40px 15px;
	font-size: 12px;
	color: #DDDDDD;
	font-family: Verdana;
	font-size: 12px;
	width: 400px;
}

.box3 > li
{
	display: flex;
	align-items: center;
}
<body>

	<div class="box3">
  
		<li>
			<img src="pictures/contact/skype.png" width="34px" height="34px" />
			<span>Skype name</span>
		</li>
    
		<li>
			<img src="pictures/contact/gadu-gadu.png" width="34px" height="34px" />
			<span>Gadu-Gadu number</span>
		</li>
    
		<li>
			<img src="pictures/contact/email.png" width="34px" height="34px" />
			<span>Email address</span>
		</li>
    
	</div>
  
</body>

看，图片相互结合。

第一张图片下应该有15像素的空格。

第二张图片下面也应该有15px的空格。

如何以15像素分隔图片？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.