垂直对齐中间 div，左右浮动

Question

我有一个用户名和照片并排显示，中间对齐，如下所示。

我现在正在尝试更改css，使照片动态向左浮动，用户名动态向右浮动。

我尝试将 float: right 和 float left 添加到 css 但这只会使照片显示在用户名下。

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

使用CSS，如何在右边显示用户名，在左边显示照片，并且仍然有用户名和照片 vertical-align: middle with width of 100 %?用户上传的照片可以有不同的高度，所以我不能使用line-height。

这是我的 HTML 代码：

<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17">
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                {# image has max-height: 149px & max-width: 149px; assigned in the css file #}
                <img class="name_details_photograph_preview_dimensions" 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;
}

Answer 1

好的，这是给你指明了正确的方向，但很明显你并不真正理解发生了什么。您那里的 div 太多了，类上的命名结构真的很糟糕。这是我如何在不删除 divs 并重新开始的情况下按照您想要的方向工作的方法（否则我会这样做）：（这是它的实时 jsfiddle）。

<!DOCTYPE HTML>
<style>
    .resumeStyleResumeTitleWrapper17 {
    position:relative;
    width: 100%;
    display:block;
    background-color: #000;
    height:175px;
}

.resumeStyleResumeTitle17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    text-align: left;
    width: 100%;
}

.resumeStyleResumeTitleInner17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    float:right;
    width: 100%;
}

.resumeStyleResumeTitleFontChange17 {
    font-size: 32px;
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
    float:right;
}

.resumeStyleResumeTitlePhotograph17 {
    background-color: #000;
    color: #fff;
    direction: ltr;

}

.resumeStyleResumeTitlePhotographInner17 {
    float:left;
    height:175px;
}

.name_details_photograph_preview_dimensions {
    max-height: 149px;
    max-width: 149px;
}
</style>
<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17">
        <div class="resumeStyleResumeTitleInner17">
            <span class="resumeStyleResumeTitleFontChange17">User Name</span>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
                <!-- image has max-height: 149px & max-width: 149px; assigned in the css file -->
                <img class="name_details_photograph_preview_dimensions" src="http://www.lessons4living.com/images/penclchk.gif" />
        </div>
    </div>
</div>
</html>

Answer 2

无法使用 float 实现，但我使用 display: flex;

获得了所需的布局

JS Fiddle

div.container {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: black;
    height: 100px;
    padding: 20px 0;
}
div.user_name {
    display: flex;
    font-size: 32px;
    font-family: Helvetica;
    color: white;
    width: 50%;
    padding-left: 20px;
}
div.user_img {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    height: 100%;
    padding-right: 20px;
}

div.user_img > img {
    height: 100%!important;
    width: auto;
}

<div class="container">
    <div class="user_name">User Name</div>
    <div class="user_img">
        <img src="http://www.lessons4living.com/images/penclchk.gif"/>
    </div>
</div>

Answer 3

已找到解决此问题的方法，请将您的 HTML 更新为以下内容，

<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17">
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                <img class="name_details_photograph_preview_dimensions" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWd99Qkjbg4ZVu-XHvaIo4LX1MittAmD0CvsiN6QcYeuv4XOQm" />
            </div>
        </div>
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
    </div>
</div>

在CSS,

.resumeStyleResumeTitleWrapper17 {
    width: 100%;
}

.resumeStyleResumeTitle17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    float: left;
    text-align: left;
    width: 100%;
    height: 150px;
}

.resumeStyleResumeTitleInner17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    max-height: 149px;
    padding: 2px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

.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;
  max-height: 149px;
  max-width: 149px;
  text-align: right;
  vertical-align: middle;
  display: inline-block;
}

.resumeStyleResumeTitlePhotographInner17 {

}

.name_details_photograph_preview_dimensions {
    max-height: 149px;
    max-width: 149px;
}
.resumeStyleResumeTitle17:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -2px;
}

基本上我添加了一个 .resumeStyleResumeTitle17:before 元素，它就像一个幽灵元素并占据整个高度并允许每个相邻元素按 display:inline-block 对齐，现在 vertical-align:middle 属性适用。

Answer 4

这是使用 CSS3 转换处理 name/title 元素垂直对齐的一种方法。

我定义了两个类、.flipLeft 和 .flipRight 来控制 name/title 和图像元素的位置。

我假设图像高度将与 name/title 的高度一样高或更高，否则，事情会变得更复杂。

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

然后我使用绝对定位将 name/title 元素从内容流中取出并将其固定到父块的相对边缘并将 top 偏移量调整为 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 class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17 flipLeft">
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                <img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
            </div>
        </div>
    </div>
</div>

<h2>Flip Image to Right</h2>
<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17 flipRight">
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                <img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
            </div>
        </div>
    </div>
</div>

垂直对齐中间 div，左右浮动

vertical align middle divs with float right & left

html

css

css-float