Question

我正在尝试找到一种在不确定高度的div中垂直居中图像的方法，当它们的高度大于包含div时，允许图像溢出div。 div包含一个随机选择的口号，可以有各种不同的长度（当然，如果浏览器窗口宽度很小，甚至可以在两行上运行一个短口号。）

我在jsfiddle中展示了这个问题。我已经尝试了我能想到的每种纯css方法（包括负边距，伪元素和变换），但它们似乎只能在猜测或知道包含div的高度时起作用。这表明实现我想要的唯一方法是使用javascript（jquery？）来建立div的高度，然后使用它来给图像提供负边距或正边距，但我不知道如何实现这一点。

<div class="slogan">
    <img src="http://www.placebear.com/150/150" alt="pic 1" class="tsimg-left"> <img src="http://www.placebear.com/150/150" alt="pic 2" class="tsimg-right">SLOGAN OF VARIOUS LENGTHS, SOME ONE LINE, SOME THREE OR FOUR</div>

.slogan {
background-color: rgba(255, 100, 0, 0.3);
text-align:center; 
display:block;
width:80%;
position:relative;
float:none;
padding:2em; 
margin:0.5em auto 1em auto;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
border-radius: 0.8em;
z-index:6;
}
.tsimg-left, .tsimg-right, .tsimg-centre {
    display:inline-block;
    padding:0 1em;
    height:150px;
    border-radius:50%;
}
.tsimg-left {
    float: left;
}
.tsimg-right {
    float: right;
}

Answer 1

编辑：（以前的方法似乎不起作用）

使用此：

.slogan {
    display: flex;
    background-color: silver;
    text-align: center;
}
.slogan > p {
    align-self: center;
    color: red;
    font-size: 22px;
    font-weight: bold;
}
#pic1 {
    display: inline-block;
    align-self: center;
    right: 0;
    height: 100px;
    border-radius: 50px;
    margin: auto;
}
#pic2 {
    align-self: center;
    height: 150px;
    border-radius: 750px;
    margin: auto;
}

<div class="slogan">
    <img src="http://www.placebear.com/150/150" alt="pic 1" id="pic1"></img><p>Here goes some text!</p>
    <img src="http://www.placebear.com/150/150" alt="pic 2" id="pic2"></img>
</div>

Answer 2

奇怪的是，有一种方法可以实现这一目标。这可能就是你所需要的：
HTML：

<div class="slogan">
    <img src="http://www.placebear.com/150/150" alt="pic 1" class="tsimg-left" />
    <span>SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths
    SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths
    SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths<br/>Slogan of various lengths
    SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths</span>
    <img src="http://www.placebear.com/150/150" alt="pic 2" class="tsimg-right" />
</div>

CSS：

body {
    padding-top:2em;
}
.slogan {
  background-color: rgba(255, 100, 0, 0.3);
  text-align: center;
  width: 80%;
  position: relative;
  margin: 2.5em auto 1em auto;
  z-index: 6;
  line-height: 100%;
}
.slogan img,
.slogan span {
    display:inline-block;
    vertical-align:middle;
}
.slogan span {
    width:250px;
}
.tsimg-left, .tsimg-right {
    height: 150px;
    border-radius: 50%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
}
.tsimg-left {
    left:5%;
}
.tsimg-right {
    right:5%;
}

和Fiddle is here

我改变了标记顺序，并使所有口号的子项显示为内联块元素。另一件事是限制div中文本的宽度，我用span标签包装（我认为现在这是有效的html）。最后使用垂直对齐方法，利用绝对定位，变换和顶级属性。

让我知道这是你所追求的。

PS。不需要JavaScript

具有已知高度的垂直居中图像，具有可变高度的div，允许图像在上方和下方溢出

2 个答案: