图片居中，文字靠左推送图片
图片居中，文字靠左推送图片
提问于 2015-06-04 00:50:50
我想有图像居中，并有文字在它的左边。我尝试过的所有方法，要么将文本放在图像的下方，要么放在图像的上方，或者我输入的越多，图像就越靠右。有谁可以帮我？我对html和css很陌生。
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
border: solid;
background-color: #FF0000;
}
span {
display: inline-block;
border: dashed blue;
color: #ff0000;
float: left;
}
.mainPicture {
display: block;
width: 30%;
margin-left: auto;
margin-right: auto;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href=main.css>
</head>
<body>
<h1>Welcome</h1>
<div>
<span> My name is asd asd. I am currently attending </span>
<img src="onlinePicture.jpg" alt="Picture of Me" class="mainPicture">
</div>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2015-06-04 00:57:37
使用CSS定位应该会对你有所帮助。
将div设置为position: relative;，然后将图像设置为position: absolute;。然后偏移图像left: 50%;，并通过使用margin-left: -15%;删除图像的一半来计算图像的宽度。
示例：
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
border: solid;
background-color: #FF0000;
}
div {
position: relative;
}
span {
display: inline-block;
border: dashed blue;
color: #ff0000;
float: left;
}
.mainPicture {
display: block;
width: 30%;
position: absolute;
left: 50%;
margin-left: -15%;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href=main.css>
</head>
<body>
<h1>Welcome</h1>
<div>
<span> My name is asd asd. I am currently attending </span>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Picture of Me" class="mainPicture">
</div>
</body>
</html>
Stack Overflow用户
发布于 2015-06-04 01:16:31
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
border: solid;
background-color: #FF0000;
}
div {
/*text-align: center;*/
font-size: 0;
margin: 10px auto;
}
div > span {
display: inline-block;
vertical-align: top;
border: 1px dashed blue;
color: #ff0000;
font-size: 16px;
width: 35%;
text-align: center;
}
div > span:nth-child(2) {
width: 30%;
border: none;
}
div > span:nth-child(2) img{
background: #ccc;
width: 100%;
}<h1>Welcome</h1>
<div>
<span> My name is asd asd. I am currently attending</span>
<span><img src="http://mc-fc.net/wp-content/uploads/2012/11/124124124_mcfc.gif" alt="Picture of Me" class="mainPicture" /></span>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30626138
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号