我有一个Shopify商店,该商店有一个分为两半的页面,一侧是文本,另一侧是图像。我希望将文本定位为使其垂直位于图像的中间。这是我当前正在使用的代码:
<div class="image">
</div>
<div class="textcontainer">
Some text which i would like centred
</div>
.image {
width: 58%;
padding-top: 60%;
margin-right: 2%;
position: relative;
float: left;
position: relative;
background-image: url("https://cdn.shopify.com/s/files/1/0292/7217/8793/files/photo-1556760647-90d218f7ca5b.jpg?v=1589200183");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.textcontainer {
width: 40%;
position: relative;
float: left;
有谁知道我该怎么做。非常感谢。
答案 0 :(得分:1)
将图像和文本包装在div .container
中,并设置flex
和align-item center
的规则。
.container {
display: flex;
align-items: center;
}
.image {
width: 58%;
padding-top: 60%;
margin-right: 2%;
position: relative;
float: left;
position: relative;
background-image: url("https://cdn.shopify.com/s/files/1/0292/7217/8793/files/photo-1556760647-90d218f7ca5b.jpg?v=1589200183");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.textcontainer {
width: 40%;
position: relative;
float: left;
}
<div class="container">
<div class="image">
</div>
<div class="textcontainer">
Some text which i would like centred
</div>
</div>
答案 1 :(得分:0)
我认为这应该有效
<style>
.container {
position: relative;
}
.textcontainer {
position: absolute;
top: 50%;
left: 50%; // add this if you want it to horizontally align too
transform: translateY(-50%); // use this for vertical align only
transform: translate(-50% -50%) // use this for both vertical & horizontal align
}
</style>
<div class="container">
<div class="image"></div>
<div class="textcontainer">
Some text which i would like centred
</div>
</div>
答案 2 :(得分:0)
<style>
.image-container{
width: 300px;
height: 300px;
display: flex;
align-items: center; //vertical center
justify-content: center; //horizental center
}
.image-container img{
width: 100%;
height: auto;
}
.image-container p{
position: absolute;
}`enter code here`
</style>
<div class="image-container">
<img src="https://fakeimg.pl/300/">
<p>vertical text</p>
</div>