html – 将图像与div对齐？

2019年8月4日 175次阅读

所以我试图将文本垂直居中在div中,然后在图片的居中右侧滑动div,如下例所示：

我到目前为止：

HTML

<div class="header">
    <div class="logo">
    <img src="/images/logo.png" alt="logo"/>
    </div> 
    <ul id="nav">
    <li><a href="$HOME_PAGE_LINK$">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    <div id="headerPro">
    <div class="headerAvatar">
        <img src="http://i.imgur.com/DQBOgkw.png" alt="avatar" />
    </div>
    <div class="headerText">
        This is some text.
    </div>
    </div>
</div>

CSS

#headerPro {
     position:absolute;
     top: 35px;
     right: 50px;
     width:450px;
     height:100px;
    }
    .headerAvatar {
     margin-top:10px;
     margin-left:150px;
     background: #242426;
     width: 70px;
     height: 70px;
     padding: 5px;
     border-radius: 50%;
    }
    .headerAvatar img{
     display: block;
     width: 100%;
     border: 0;
     margin: 0; 
     border-radius: 50%;
    }
    .headerText {
     height:50px;
     width:200px;
     text-align:center;
     background-color:red;
    }

最佳答案 你可以使用float属性：

将图像div设置为内联：

.headerAvatar { display: inline-block; }

然后浮动文本：

.headerText { float: right }

小提琴：http://jsfiddle.net/nDXMr/

注意：我把一些margin-top垂直对齐2 div.

点赞