垂直对齐中间div与右浮动＆amp;左

时间：2015-05-30 00:36:47

标签： html css css-float

我有一个并排显示的用户名和照片，如下图所示。

enter image description here

我现在正在尝试更改css，以便照片动态浮动到左侧，用户名动态地浮动到右侧。

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

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

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

这是我的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;
}

4 个答案:

答案 0 :(得分：6)

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

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

我认为图像高度将高于或高于名称/标题的高度，否则事情会变得更复杂。

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

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

最后，我使用CSS3变换来调整名称/标题元素的高度。

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

＆＃13;
＆＃13; 
.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%);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

无法使用float实现目标，但我使用display: flex;获得了所需的布局

JS Fiddle

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

找到此问题的修复程序，将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元素，其作用类似于ghost元素并占据整个高度，并允许每个相邻元素按display:inline-block对齐，现在vertical-align:middle属性适用。< / p>

答案 3 :(得分：-1)

好的，这是指向正确的方向，但很明显你并不真正理解发生了什么。你有太多的div在那里，并且在类上的命名结构非常糟糕。以下是我如何使它在你想要的方向上工作，而不删除div并重新开始（这是我会做的事情）:(这是实时的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>
相关问题
最新问题