Question

我在嵌套的div .box中包含了一个图像。如果它没有浮动，则图像可以完全居中于.box，但当我float它left或right时，中心对齐就会消失！我有4张各种尺寸的图像需要在自己的.box内居中。我该如何解决？

HTML

 <div class="con">
   <div class="box">
      <img src="../_images/icon-test.png">  
    </div>  
  </div>

CSS

.con {
    width:300px;
    height:200px;
    background: #996600;
}

.box {
    position:relative;
    width:150px;
    height:150px;
    background-color: #333333;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    float:right;
}

Answer 1

您可以使用display: flex。

将您的display: table-cell更改为display: flex。

然后将text-align:center;和vertical-align:middle;更改为align-items: center;和justify-content: center;，使其垂直和水平居中。

编辑：然后我还为图像添加了150px的最大宽度，以便在图像大于它时阻止它从容器中扩展出来。 @Hkidd的道具指出这种情况发生了。

＆＃13;

.con {
  width: 300px;
  height: 200px;
  background: #996600;
}
.box {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
}
img {
  max-width: 150px;
}

＆＃13;

<div class="con">
  <div class="box">
    <img src="http://placehold.it/200x100">
  </div>
</div>

＆＃13;

Answer 2

<强>解释

我认为您必须定位img absolute，因此它将定位于其父.box的绝对位置，因为.box位于相对位置。此外，display: table-cell;是不必要的，因为img不在表格内。

这就是我提出的：

.con {
  background: #996600;
  height: 200px;
  width: 300px;
}
.box {
  background-color: #333333;
  float: right;
  height: 150px;
  position: relative;
  width: 150px;
}
.box img {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 90%;
}

<div class="con">
  <div class="box center">
    <img src="http://placehold.it/120x100">
  </div>
</div>

Answer 3

如果问题中包含单个图像，则可以使用[TestFixture] public class TestClassTests { private TestClass _cut; private Mock<ISystemEvents> _systemEventsMock; private Mock<ITestService> _testServiceMock; [SetUp] public void SetUp() { _systemEventsMock = new Mock<ISystemEvents>(); _testServiceMock = new Mock<ITestService>(); _cut = new TestClass( _systemEventsMock.Object, _testServiceMock.Object ); } [TestFixture] public class OnPowerModeChanged : TestClassTests { [Test] public void When_PowerMode_Resume_Should_Call_TestService_DoStuff() { _systemEventsMock.Raise(m => m.PowerModeChanged += null, new PowerModeChangedEventArgs(PowerModes.Resume)); _testServiceMock.Verify(m => m.DoStuff(), Times.Once); } } }解决方案将图像精确放置在line-height div＆amp;的中心位置。在图片上使用.box。适用于所有浏览器和简单易懂。

参考代码：

vertical-align: middle

.con {
  width: 300px;
  height: 200px;
  background: #996600;
}
.box {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #333333;
  text-align: center;
  vertical-align: middle;
  float: right;
  line-height: 150px;
}
img {
  height: 60px;
  vertical-align: middle;
}

为什么不能将图像置于'div'中，右边或左边是'float'？

3 个答案: