简化您的标记

Question

我有一个带页面标题的html页面。

页面标题的高度由用户照片的高度决定。用户照片可以是任何尺寸。

我自己无法解决的问题是我正在尝试将文本标题垂直对齐到标题持有者的中间位置，但如果照片具有动态高度（最大值），我无法弄清楚这一点。身高是149px）。为div指定特定高度确实允许中间垂直对齐，但由于用户照片可以是任何高度，因此指定设置高度可能会使外观看起来很奇怪。

这是我想要实现的目标：

enter image description here

有人知道如何将用户名称与动态高度垂直对齐吗？我已经阅读了几篇类似的SO帖子，尝试了几件事，但我无法让它发挥作用。

这是我的HTML代码：

<div class="resumeStyleNameTitleWrapper">
    <div class="resumeStyleNameTitle">
        <div class="resumeStyleNameTitleInner">
            <div class="resumeStyleNameTitleFontChange">Users Name</div>
        </div>
    </div>

    <div class="resumeStyleNameTitlePhotograph">
        <div class="resumeStyleNameTitlePhotographInner">
            {# image has max-height: 149px & max-width: 149px; assigned in the css file #}
            <img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="{{ name_details_photograph_url }}" />
        </div>
    </div>
</div>

这是我的CSS：

.resumeStyleNameTitleWrapper {
    display: table-cell;
    width: 100%;
}

.resumeStyleNameTitle {
    direction: ltr;
    display: table-cell;
    float: left;
    text-align: left;
    width: calc(100% - 159px);  /*less the width of the photograph plus 10px */
    background-color: lime;
}

.resumeStyleNameTitleInner {
    direction: ltr;
    display: table-cell;
    max-height: 149px;
    text-align: left;
    vertical-align: middle;
    width: 100%;
    background-color: orange;
}

.resumeStyleNameTitleFontChange {
    direction: ltr;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

.resumeStyleNameTitlePhotograph {
    direction: ltr;
    display: table-cell;
    float: right;
    max-height: 149px;
    max-width: 149px;
    text-align: right;
    vertical-align: top;
}

.resumeStyleNameTitlePhotographInner {
    display: inline-block;
    vertical-align: middle;
}

.name_details_photograph_preview_dimensions {
    max-height: 149px;
    max-width: 149px;
}

Answer 1

示例：http://jsfiddle.net/kevalbhatt18/78Lzadtt/2/

我通过将 resumeStyleNameTitlePhotograph clss放入 resumeStyleNameTitleInner

来解决您的问题



<div class="resumeStyleNameTitleWrapper">
    <div class="resumeStyleNameTitle">
        <div class="resumeStyleNameTitleInner">
            <div class="resumeStyleNameTitleFontChange">Users Name</div>
        </div>
<div class="resumeStyleNameTitlePhotograph">
        <div class="resumeStyleNameTitlePhotographInner">
            <img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="">
        </div>
    </div>
    </div>
</div>

现在，如果您的图像尺寸发生变化，那么您的文本div也将根据图像div大小改变其高度

Answer 2

简化您的标记

一个包含文本元素和img的div：

父div获得display: table和text-align: right以将图片与右侧对齐
名称元素（我的示例中为h2）被赋予display: table-cell和vertical-align: middle以使其保持垂直居中。 text-align: left将名称带到左侧
图像被赋予vertical-align以删除默认基线间隙

完整示例

兼容性： display: table is recognised in IE8+ and all modern browsers.

＆＃13;

* {
  margin: 0;
}
.name {
  background: #F00;
  display: table;
  width: 100%;
  text-align: right;
}
.name > img {
  max-height: 149px;
  max-width: 149px;
  vertical-align: middle;
}
.name > h2 {
  text-align: left;
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;
}

＆＃13;

<div class="name">
  <h2>John Smith</h2>
  <img src="http://www.placehold.it/200X100" />
</div>

＆＃13;

Answer 3

试试这个

＆＃13;

.container {
	display: table;
    width: 80%;
    background: green;
    padding: 5px;
}
.first-child {
	display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: yellow;
}
.second-child {
	display: table-cell;
  text-align: center;
  vertical-align: middle;

}
.text {
	color: red;
	font-size: 20px;
	
}

＆＃13;

<div class="container">
	<div class="first-child">
		<div class="text">
			Username
		</div>
		
	</div>
	<div class="second-child">
		<img src="http://placehold.it/350x150" />
	</div>
</div>
<br/>
<div class="container">
	<div class="first-child">
		<div class="text">
			Username
		</div>
		
	</div>
	<div class="second-child">
		<img src="http://placehold.it/350x200" />
	</div>
</div>
<br/>
<div class="container">
	<div class="first-child">
		<div class="text">
			Username
		</div>
		
	</div>
	<div class="second-child">
		<img src="http://placehold.it/350x100" />
	</div>
</div>

＆＃13;

Answer 4

我将简单地使用table来完成此任务。整洁而简单。没有搞乱CSS，我不必担心浏览器兼容性。

只需确保在用户名列上将valign（垂直对齐）设置为middle。

<table width="100%" border="0"> <tr> <td width="52%" valign="middle">Username</td> <td width="29%"> </td> <td width="19%"></div></td> </tr> </table>

<强> HERE IS A FIDDLE

在具有动态高度

4 个答案:

简化您的标记

完整示例