如何将文本与图像对齐？

问题描述：

我想将文本与this project中的图像对齐，就好像我正在使用文本编辑器（like this）一样。我试过如何将文本与图像对齐？

<img src:"image.jpg" align="top">

但它只做第一行。

可能重复的[如何使用HTML/CSS将图片包裹在图片周围]（http://*.com/questions/19179424/how-to-wrap-text-around-an-image-using -html-CSS）。 – showdev

答

让图像float:left

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Arvo', serif; 
 
} 
 

 
div#wrapper { 
 
    height: 100%; 
 
    overflow: hidden; 
 
    padding-top:56px; 
 
    box-sizing:border-box; 
 
} 
 

 
div#header { 
 
    position:fixed; 
 
    top: 0; 
 
    height: 60px; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 48px; 
 
    width: 100%; 
 
    background-color: rgba(0, 79, 113, 1); 
 
} 
 

 
div#sidebar { 
 
    width: 178px; 
 
    float: left; 
 
    min-height: 100%; 
 
    padding: 20px 20px 0px 0px; 
 
    text-align: right; 
 
    color: white; 
 
    height: 100%; 
 
    width: 6%; 
 
    background-color: rgba(100, 147, 167, 1); 
 
} 
 

 
div#content { 
 
    margin-left: 178px; 
 
    min-height: 100%; 
 
    padding:75px; 
 
} 
 

 
li { 
 
    list-style-position: inside; 
 
    list-style-type: none; 
 
    line-height: 30px 
 
} 
 

 
a{ 
 
    color:white; 
 
    text-decoration: none; 
 
} 
 

 
img.spaced{ 
 
    float:left; 
 
    margin: 5px; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo"> 
 
    <link rel="stylesheet" type="text/css" href="../css/main.css"> 
 
    <meta charset="UTF-8"> 
 
    <title>Home Page</title> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 
     Home 
 
    </div> 
 
    <div id="sidebar"> 
 
     <ul> 
 
     <li><a href="../html/link.html">Link</a></li> 
 
     <li><a href="../html/link.html">Link</a></li> 
 
     <li><a href="../html/link.html">Link</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="content"> 
 
     <img class="spaced" src="http://i.imgur.com/HNj6tRD.jpg" style="width:60px; height:85px"><div class="bigletter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
    </div> 
 
</body>

答

div#content { 
    font-size: 0; 
    margin-left: 178px; 
    min-height: 100%; 
    padding:75px; 
} 
img.spaced{ 
    padding:0px 10px 10px 0px; 
    box-sizing: border-box; 
    vertical-align: middle; 
    display: inline-block; 
    width: 12%; 
} 
.bigletter { 
    display: inline-block; 
    font-size: 16px; 
    vertical-align: middle; 
    width: 88%; 
}

上#content的font-size: 0摆脱引起的HTML新线条和空间的空白。你应该给他们display: inline-block，你可以摆脱填充img.spaced，或者你可以给它box-sizing: border-box像在这个例子中。 box-sizing: border-box导致填充向内而不是向外推。这里是一个CodePen

如何将文本与图像对齐？

相关推荐