[英]How do i place text in the middle of an image in html?
This is my html code这是我的 html 代码
<div class="container">
<div class="box">
<div class="content" style="display: flex">
<img src="/img/logo.png">
<p style="margin-left: 40px">YukinoMusic</p>
</div>
</div>
</div>
And the image below shows what I am trying to achieve下图显示了我想要实现的目标
You need to use justify-content
and align-items
to manipulate the positioning of the children from .content
selector.您需要使用justify-content
和align-items
从.content
选择器中操纵子项的定位。 Set justify-content
to left
and align-items
to center
将justify-content
设置为left
并将align-items
设置为center
.content {
justify-content: left;
align-items: center;
}
Try with this, it should work:试试这个,它应该工作:
<div class="container">
<div class="box">
<div class="content" style="display: flex; align-items:center;">
<img src="/img/logo.png">
<p style="margin-left: 40px">YukinoMusic</p>
</div>
</div>
</div>
There are a few ways to do what you want有几种方法可以做你想做的事
The best one is probably using your logo as a background image最好的可能是使用您的徽标作为背景图片
.container { width: 100%; height: 130px; position: relative; background-image: url("https://i.stack.imgur.com/BjC4H.png"); display: flex; justify-content: center; align-items: center; color: #ccc; font-size: 2rem;; }
<div class="container"> YukinoMusic </div>
But you can also use different divs and position them as you want但您也可以根据需要使用不同的 div 和 position
.content { position: relative; } #text { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; justify-content: center; align-items: center; font-size: 2rem; color: #ccc; }
<div class="container"> <div class="box"> <div class="content"> <img src="https://i.stack.imgur.com/BjC4H.png"> <div id="text">YukinoMusic</div> </div> </div> </div>
Technically, this is a CSS question, not a HTML question.从技术上讲,这是一个 CSS 问题,而不是 HTML 问题。 CSS is concerned with the styling of your webpage, and therefore your question is in the realm of CSS, not HTML, which only describes content and structure. CSS is concerned with the styling of your webpage, and therefore your question is in the realm of CSS, not HTML, which only describes content and structure.
The way I would do it is我会这样做的方式是
<p style="position: absolute; left: 50%; transform: translate(-50%)">"Hallo Welt"</p>
Here is how, just set the margin to be auto
.方法如下,只需将边距设置为auto
即可。 Remember, first value is up&down and the second is left&right请记住,第一个值是 up&down,第二个是 left&right
margin: up&down left&right
body { background-color: rgb(40, 40, 40); }.content { border: solid white 2px; display: flex; }.content > img { border-radius: 50%; }.p1 { color: white; margin: 100px auto; }.p2 { color: white; margin: auto 200px;
<div class="container"> <div class="box"> <div class="content"> <img src="https://i.pinimg.com/474x/63/a2/46/63a2469a6f9557da638b1c75d56b1554.jpg" width="200px"> <p class="p1">YukinoMusic</p> </div> <div class="content"> <img src="https://i.pinimg.com/474x/ab/63/55/ab63556093e53148bc947e63bb9b262a.jpg" width="200px"> <p class="p2">YukinoMusic</p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.