gpt4 book ai didi

html - 居中图像和文本向左插入图像

转载 作者:太空宇宙 更新时间:2023-11-03 17:30:47 25 4
gpt4 key购买 nike

我希望图像居中,文本位于其左侧。我尝试过的所有方法要么将文本放在图像下方,图像上方,要么将图像向右推得越多,我输入的越多。谁能帮我?我是 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>

最佳答案

使用 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>

关于html - 居中图像和文本向左插入图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30626138/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com