gpt4 book ai didi

html - 使文本和图像彼此相邻 float

转载 作者:行者123 更新时间:2023-12-04 08:27:09 24 4
gpt4 key购买 nike

view my picture
如黄色圆圈和箭头所示,我希望文本位于图像旁边的中间(红色方块)。是否可能,如果是,如何?

}
.column {
float: left;
width: 30%;
padding: 5px;
}
.contact{
display: inline-block;
margin: 0px;
padding: 0px;
}
<body id="home">


<br><br><br><br><br>
<div class="row">
<div class="contact">
<h1>creative consultant </h1>
<h3>& service designer</h3>
<br><p>catch me at +(45)xx xx xx xx
<br> or caroline@live.dk</p></div>
<div class="column">
<img src="me_outline.svg" alt="outline.me" style="width:100%">
</div>
</div>

最佳答案

Output

    .column {
display: block;
float: left;
padding: 5px;

}
.row{
display: block;
float: left;
transform: translate(50% ,50%);
padding: 0px;
}
<body id="home">
<div class="column">
<img src="https://place-hold.it/500x500" alt="outline.me">
</div>
<div class="row">
<div class="contact">
<h1>creative consultant </h1>
<h3>& service designer</h3>
<br><p>catch me at +(45)xx xx xx xx
<br> or caroline@live.dk</p>
</div>
</div>
</body>

关于html - 使文本和图像彼此相邻 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65207010/

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