html – 垂直对齐中间div,左右浮动

概述我有一个并排显示的用户名和照片,如下图所示. 我现在正在尝试更改css,以便照片动态浮动到左侧,用户名动态浮动到右侧. 我尝试添加float：right并向左浮动到css但这只会使照片显示在用户名下. 我已经阅读了几个类似的线程并尝试了很多东西,但我无法解决这个问题.真的很令人沮丧.这可能是一个简单的修复,但我看不到它. 使用CSS,如何在右侧显示用户名,在左侧显示照片,并且仍然具有用户名和照片v 我有一个并排显示的用户名和照片,如下图所示.

我现在正在尝试更改CSS,以便照片动态浮动到左侧,用户名动态浮动到右侧.

我尝试添加float：right并向左浮动到CSS但这只会使照片显示在用户名下.

我已经阅读了几个类似的线程并尝试了很多东西,但我无法解决这个问题.真的很令人沮丧.这可能是一个简单的修复,但我看不到它.

使用CSS,如何在右侧显示用户名,在左侧显示照片,并且仍然具有用户名和照片vertical-align：mIDdle,宽度为100％？用户上传的照片可以是不同的高度,所以我不能使用行高.

这是我的HTML代码：

<div >    <div >        <div >            <div >User name</div>        </div>        <div >            <div >                {# image has max-height: 149px & max-wIDth: 149px; assigned in the CSS file #}                <img  src="{{ image_url }}" />            </div>        </div>    </div></div>

这是我的CSS代码：

.resumeStyleResumeTitleWrapper17 {    display: table-cell;    wIDth: 100%;}.resumeStyleResumeTitle17 {    background-color: #000;    color: #fff;    direction: ltr;    display: table-cell;    float: left;    text-align: left;    wIDth: 100%;}.resumeStyleResumeTitleInner17 {    background-color: #000;    color: #fff;    direction: ltr;    display: table-cell;    max-height: 149px;    padding: 2px;    text-align: left;    vertical-align: mIDdle;    wIDth: 100%;}.resumeStyleResumeTitleFontChange17 {    direction: ltr;    Font-size: 32px;    Font-weight: bold;    text-align: left;    text-transform: uppercase;    wIDth: 100%;}.resumeStyleResumeTitlePhotograph17 {    background-color: #000;    color: #fff;    direction: ltr;    display: table-cell;    max-height: 149px;    max-wIDth: 149px;    padding: 2px;    text-align: right;    vertical-align: mIDdle;}.resumeStyleResumeTitlePhotographInner17 {    display: inline-block;    vertical-align: mIDdle;}.name_details_photograph_prevIEw_dimensions {    max-height: 149px;    max-wIDth: 149px;}

解决方法 这是使用CSS3转换来处理名称/标题元素的垂直对齐的一种方法.

我定义了两个类,.flipleft和.flipRight来控制名称/标题和图像元素的位置.

我假设图像高度将高于或高于名称/标题的高度,否则,事情会变得更复杂.

诀窍是使用text-align属性将图像放置在父块的左侧或右侧.

然后,我使用绝对定位从内容流中取出名称/标题元素并将其固定到父块的相对边缘,并将顶部偏移调整为50％以获得近似垂直居中.

最后,我使用CSS3变换来调整name / Title元素的高度.

注意：在下面的代码段中,垂直滚动以查看这两个示例.

.resumeStyleResumeTitleWrapper17 {    display: block;    wIDth: auto;    border: 1px dotted blue;}.resumeStyleResumeTitle17 {    background-color: #000;    color: #fff;    position: relative;}.resumeStyleResumeTitleFontChange17 {    Font-size: 32px;    Font-weight: bold;    text-align: left;    text-transform: uppercase;}.resumeStyleResumeTitlePhotograph17 {    border: 1px dotted yellow;    display: inline-block;    vertical-align: top;}.resumeStyleResumeTitlePhotographInner17 {}.name_details_photograph_prevIEw_dimensions {    max-height: 149px;    max-wIDth: 149px;    display: block;}.flipleft.resumeStyleResumeTitle17 {    text-align: left;}.flipleft .resumeStyleResumeTitleInner17 {    border: 1px dotted yellow;    position: absolute;    right: 0;    top: 50%;    transform: translateY(-50%);}.flipRight.resumeStyleResumeTitle17 {    text-align: right;}.flipRight .resumeStyleResumeTitleInner17 {    border: 1px dotted yellow;    position: absolute;    left: 0;    top: 50%;    transform: translateY(-50%);}

<h2>Flip Image to left</h2><div >    <div >        <div >            <div >User name</div>        </div>        <div >            <div >                <img  src="http://placehold.it/140x100" />            </div>        </div>    </div></div><h2>Flip Image to Right</h2><div >    <div >        <div >            <div >User name</div>        </div>        <div >            <div >                <img  src="http://placehold.it/140x100" />            </div>        </div>    </div></div>

总结

以上是内存溢出为你收集整理的html – 垂直对齐中间div,左右浮动全部内容，希望文章能够帮你解决html – 垂直对齐中间div,左右浮动所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。