以HTML / CSS居中放置文字和图像
[英]Center text and image in HTML / CSS
问题描述
I try to float a picture next to some text and all centered. 
我尝试将图片浮动在某些文本旁边，并且全部居中。 This is how far I got and the arrow shows where I actually would like to have the image placed. 这就是我所走的距离，箭头显示了我实际想要放置图像的位置。
HTML 的HTML
<!DOCTYPE html>
<head>
<title>Simple Page</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<div class="content">
<div class="cv">
<p>
Some text<br>
Some more text<br>
etc etc<br>
</p>
<p>
<a href="mailto:test@example.com">test@example.com</a>
</p>
<p>
Download
<a href="example-eng.pdf">eng</a>
<a href="example-deu.pdf">deu</a>
</p>
</div>
<div class="photo">
<img src="image/dummy.png" alt="dummy">
</div>
</div>
</body>
</html>
CSS (I tried to follow some other stackoverflow answers, but seems like I could not understand what I am really doing) CSS（我尝试遵循其他一些stackoverflow答案，但是似乎我听不懂我在做什么）
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 150%;
line-height: 1.6em;
}
.cv {
display: table;
margin: 0 auto;
}
.photo {
float: right;
}
Any general critic is also welcome and I would also appreciate some words of background explanation rather than just a solution code snippet. 也欢迎任何一般的批评家，我也将不胜感激地解释一些背景知识，而不仅仅是解决方案代码段。 Thanks. 谢谢。
4 个解决方案
解决方案1
3 已采纳 2014-04-21 10:32:33
According to the HTML spec , <span> is an inline element and <div> is a block element. 根据HTML规范 ， <span>是一个内联元素，而<div>是一个block元素。 Now that can be changed using the display CSS property but there is one issue: in terms of HTML validation, you can't put block elements inside inline elements so: 现在可以使用display CSS属性更改它，但是存在一个问题：就HTML验证而言，您不能将块元素放在内联元素中，因此：
<span>...<div>foo</div>...</span>
is not strictly valid even if you change the <div> to inline or inline-block . 即使将<div>更改为inline或inline-block也不严格有效。
So, if your element is inline or inline-block use a <span> . 因此，如果您的元素是inline或inline-block使用<span> 。 If it's a block level element, use a <div> . 如果是block级元素，请使用<div> 。
HTML 的HTML
<div class="content">
<span id="texxts">
<div class="cv">
<p>
Some text<br>
Some more text<br>
etc etc<br>
</p>
<p>
<a href="mailto:test@example.com">test@example.com</a>
</p>
<p>
Download
<a href="example-eng.pdf">eng</a>
<a href="example-deu.pdf">deu</a>
</p>
</div>
</span>
<span>
<div class="photo">
<img src="http://webjunction.net/images/avatars/default-avatar.png" alt="dummy">
</div>
</span>
</div>
css 的CSS
.content {
margin-bottom:2%;
text-align: center;
}
.content span {
display: inline-block;
vertical-align: middle;
}
.content #texxts {
border: 1px solid red;
/* to show the centering */
}
body {
font-family:'Lato', sans-serif;
font-weight: 300;
font-size: 150%;
line-height: 1.6em;
}
.cv {
display: table;
margin: 0 auto;
}
.photo {
float: right;
}
解决方案2
2 2014-04-21 10:02:14
Here's your HTML a little prettier 这是您的HTML的更漂亮
<div class="content">
<div class="cv">
<p>Some text</p>
<p>Some more text</p>
<p>etc etc</p>
<p><a href="mailto:test@example.com">test@example.com</a></p>
<p>Download
<a href="example-eng.pdf" class="p-link">eng</a>
<a href="example-deu.pdf" class="p-link">deu</a>
</p>
</div>
<div class="photo">
<img src="image/dummy.png" alt="dummy">
</div>
</div>
and the CSS 和CSS
.content {
background: #fefefe;
width: 600px;
margin: 20px auto 0; /* margins - top | left/right | bottom */
padding: 10px;
text-align: center;
border: 1px dashed #bbb;
}
.cv {
display: inline-block;
margin: 0 20px;
}
.photo {
position: relative;
display: inline-block;
width: 150px;
height: 200px;
}
.photo:after {
background: rgba(100,100,100,0.5);
position: absolute;
content: "Image description";
top: 0;
left: 0;
width: 100%;
height: 0;
padding: 10px;
color: #fff;
opacity: 0;
transition: all 0.4s linear;
box-sizing: border-box;
}
.photo:hover.photo:after {
height: 100%;
opacity: 1;
}
.photo img {
width: 100%;
height: 100%;
}
p {
text-align: left;
line-height: 23px;
}
.p-link {
margin-left: 10px;
}
If you want block level elements like div to be side by side (inline) you must assign them CSS propery display: inline-block; 如果要使像div这样的块级元素并排（内联），则必须为其分配CSS属性display: inline-block; or you can leave them to be displayed block and float them to the left or 1st to left 2nd to right and their width combined with margins, padding and borders can not cross container inner width or they be stacked again one on top of the other. 或者，您可以让它们显示为块状，然后将它们向左浮动或从第1个向左浮动，然后从第2个向右浮动，其宽度加上边距，边距和边框不能跨越容器的内部宽度，或者将它们一次又一次地堆叠在一起。 Anyway here's a FIDDLE 反正这是场
解决方案3
1 2014-04-21 09:50:21
You are floating the photo to the right, but only after the .cv element was rendered. 您将照片向右浮动，但仅在渲染.cv元素之后。 Therefore the float kind of behaves as though you have an 'enter' behind the .cv element, placing it on a new line, and floating it to the right on that line. 因此，float类的行为就好像您在.cv元素后面有一个“ enter”，将其放在新行上，然后将其浮动到该行的右侧。 That is what you're seeing, the photo is below the .cv element, but properly floated right. 那就是您所看到的，照片在.cv元素下面，但正确地向右浮动。
To fix, you can either float .cv left (which will break your current horizontal center alignment of the .cv element), or you could put the photo element before the .cv element in the HTML. 要解决此问题，您可以将.cv浮动到左（这将打破.cv元素的当前水平居中对齐），也可以将photo元素放在HTML中的.cv元素之前。 This way it'll float right on the first 'line', and rendering the .cv element on the same line. 这样，它将在第一行上浮动，并在同一行上呈现.cv元素。
Note that the display: table on the .cv element is of no use and should probably be removed, unless in your real code you're also using table-rows and table-cells within the .cv element. 请注意， .cv元素上的display: table是没有用的，应该将其删除，除非在您的真实代码中您还在.cv元素内使用了table-rows和table-cells 。 What use would it be otherwise :) 否则会有什么用:)
解决方案4
0 2014-04-21 10:17:40
**Try this**
.cv {
display: table;
margin: 0 auto;
float:left;
}
.photo {
float: left;
margin-top:80px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.