图片在DIV的中间和中心

时间：2017-10-24 12:16:23

标签： html css css3

目标：
图片应位于div test1的中心和中间，测试2使用相同的源代码。

问题：
为了使它成为中间而我错过了哪一部分，test1和test2的权重可能不同。

谢谢！

＆＃13;
＆＃13; 
#parent {
  display: flex; /* equal height of the children */
}

#test1 {
  border-right: 1px solid black;    
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  background: white;
  width: 100px;
  height: 400px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  
  
  flex: 1; /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  background: white;
  width: 100px;
  height: 200px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  
  flex: 1; /* additionally, equal width */
}

img {
	margin-left: auto;
	margin-right: auto;
    margin-top: 25px;	
	display: block;


	
    height: auto;
	position: relative;
}
.helper {

    vertical-align: middle;
}
＆＃13; 
	<div id="parent">  
		<div id="test1">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
		<div id="test2">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
	</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：2)

您可以使用flexbox将img居中，如下所示：

display: flex;
align-items: center;
justify-content: center;

只需将#test1和#test2包装器显示为flex。

#parent {
  display: flex; /* equal height of the children */
}

#test1 {
  border-right: 1px solid black;    
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  width: 100px;
  height: 400px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  
  
  flex: 1; /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  width: 100px;
  height: 200px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  
  flex: 1; /* additionally, equal width */
}

img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
	<div id="parent">  
		<div id="test1">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
		<div id="test2">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
	</div>

答案 1 :(得分：0)

试试这个：

#test1,
#test2 {
 display: flex;
 align-items: center;
 justify-content: center;
}

无论父母身高多少，图像都会在中间

答案 2 :(得分：0)

这也有效：

#parent>div{
  display: grid;
  align-content: center;
}
#parent>div>img{
   margin: 0 auto;
}


#parent {
  display: flex; /* equal height of the children */
}

#parent>div{
  display: grid;
  align-content: center;
}
#parent>div>img{
   margin: 0 auto;
}

#test1 {
  border-right: 1px solid black;    
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  background: white;
  width: 100px;
  height: 400px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;

  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  
  
  flex: 1; /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;

  background: white;
  width: 100px;
  height: 200px;
  padding:15px 15px 15px 15px;

  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  
  flex: 1; /* additionally, equal width */
}

img {
	margin-left: auto;
	margin-right: auto;
    margin-top: 25px;	
	display: block;


	
    height: auto;
	position: relative;
}
.helper {

    vertical-align: middle;
}
	<div id="parent">  
		<div id="test1">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
		<div id="test2">
			<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">		
		</div>
	</div>

答案 3 :(得分：0)

解决方案1：使用CSS转换

一种方法是在父元素上使用position: relative（即#test1和#test2），然后将图像从父元素的顶部和左侧中间定位，然后偏移它向上和向左移动计算高度的一半：

#test1, #test2 {
    position: relative;
}
img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#parent {
  display: flex;
  /* equal height of the children */
}

#test1 {
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: white;
  width: 100px;
  height: 400px;
  padding: 15px 15px 15px 15px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  flex: 1;
  /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: white;
  width: 100px;
  height: 200px;
  padding: 15px 15px 15px 15px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  flex: 1;
  /* additionally, equal width */
}

#test1, #test2 {
  position: relative;
}

img {
  margin-left: auto;
  margin-right: auto;
  display: block;
 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div id="parent">
  <div id="test1">
    <img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
  </div>
  <div id="test2">
    <img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
  </div>
</div>

解决方案2：使用嵌套的flexbox

另一种解决方案是使用嵌套的flexbox来垂直对齐图像。父母（#test1和#test2）必须将其显示属性设置为flex，并使用justify-content: center和align-items: center的组合来嵌套嵌套图像： 

#test1, #test2 {
    display: flex;
    align-items: center;
    justify-contents: center;
}


#parent {
  display: flex;
  /* equal height of the children */
}

#test1 {
  border-right: 1px solid black;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: white;
  width: 100px;
  height: 400px;
  padding: 15px 15px 15px 15px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  flex: 1;
  /* additionally, equal width */
}

#test2 {
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background: white;
  width: 100px;
  height: 200px;
  padding: 15px 15px 15px 15px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  flex: 1;
  /* additionally, equal width */
}

#test1, #test2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
<div id="parent">
  <div id="test1">
    <img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
  </div>
  <div id="test2">
    <img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
  </div>
</div>

相关问题
最新问题