如何在包裹在母亲中的div中居中文本div

我正在尝试将包含在主容器中的图像旁边的一段文本居中。因为某些原因。我有一个黑色的文字集中在页面中间的容器外。如何在包裹在母亲中的div中居中文本div

.wrapper { 
 
    display: inline-block; 
 
    width: 240px; 
 
    height: 200px 
 
} 
 

 
.textblock { 
 
    display: inline-block; 
 
    max-width: 300px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    bottom: auto; 
 
    right: auto; 
 
}

<div class="wrapper"> 
 
    <div class="this"> 
 
    <img src="image.jpg"> 
 
    </div> 
 

 
    <div class="textblock"> 
 
    <h2>title</h2> 
 
    <p> Some paragraph here</p> 
 
    <a href="#">link</a> 
 
    </div> 
 
</div>

该包装应该在链接的中间为中心而包装物的内容也是在包装物的中间居中。图片在左边，文字在右边。

出于某种原因，我将textblock居中置于页面中间。不在容器中。

有没有什么好的方法让我摆脱这个困境？在此先感谢 米歇尔

来源

2017-10-10 Michelle Dimwaite

这里是你问的第二个解决方案（使之成为多张图片/文本模式;我想你可能需要它）：

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
.wrapper { 
 
    width: 1200px; /* changed */ 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.wrapper > .box { 
 
    display: flex; 
 
    margin-bottom: 10px; 
 
    background: Lavender; /* added for better presentation */ 
 
} 
 

 
.wrapper > .box:last-child { 
 
    margin-bottom: 0; /* optional; sets the margin-bottom to 0 for the last box child/element inside the parent wrapper */ 
 
} 
 

 
.wrapper > .box > img { 
 
    flex: 7.2; /* added; means 60% */ 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.wrapper > .box > .textblock { 
 
    flex: 4.8; /* added; means 40%; 7.2 + 4.8 = 12; because of the 1200px wrapper width */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-evenly; /* vertical alignment, other values you can try: space-between; space-around; flex-start; center; flex-end; */ 
 
    align-items: center; /* horizontal alignment, before: text-align: center; */ 
 
} 
 
/* changed to 480px */ 
 
@media screen and (max-width: 480px) { 
 
    .wrapper > .box { 
 
    flex-direction: column; /* to stack them one above the other, i.e. two rows */ 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-720-250-9.jpg" alt="img1"> 
 
    <div class="textblock"> 
 
     <h2>Title</h2> 
 
     <p>Some paragraph here.</p> 
 
     <a href="#">Link</a> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-720-250-5.jpg" alt="img1"> 
 
    <div class="textblock"> 
 
     <h2>Title</h2> 
 
     <p>Some paragraph here.</p> 
 
     <a href="#">Link</a> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-720-250-1.jpg" alt="img1"> 
 
    <div class="textblock"> 
 
     <h2>Title</h2> 
 
     <p>Some paragraph here.</p> 
 
     <a href="#">Link</a> 
 
    </div> 
 
    </div> 
 
</div>

正如你可以看到，原来的大小的使用图像宽度为720px（或1200px包装的60％），高度为250px，就像您所说的那样。在这种情况下，它至少需要720px宽，它可以更多，它不会改变任何东西（表现形式），但如果它少了，那么质量和比例就会下降。请注意，如果您决定在1200像素下没有包装限制的情况下进入“全屏”状态，您需要找到更宽的图像，最好至少为屏幕宽度的60％（如果您决定保留60％/ 40 ％比例）。我个人更喜欢定义宽度的包装，比如在这种情况下为1200px，如果不是1200px，那么也许你可以给它1920px，但是我不会超出这个范围（如果你的“设计屏幕/显示器”至少是那么宽）。如果你愿意的话，你也可以使用1400px，但正如我所说，现在的容器/包装通常设置为1200px，尽管这个“趋势”可能会在几年内发生变化。

我添加了一些有用的评论，以获得更好的解释，如果您需要任何其他帮助，请让我知道。

来源

2017-10-11 19:24:00 VXp

非常感谢，非常感谢。 –

.textblock { 
 
    display: inline-block; 
 
    max-width: 300px; 
 
    position: relative; 
 
    left: 50%; 
 
    top: 50%; 
 
    bottom: auto; 
 
    right: auto; 
 
} 
 
.this { 
 
    display: inline-block; 
 
}

<div id="wrapper"> 
 
    <div class="this"> 
 
    <img src="https://i.stack.imgur.com/eUM8z.png?s=48&g=1"> 
 
    </div> 
 

 
    <div class="textblock"> 
 
    <h2>title</h2> 
 
    <p> Some paragraph here</p> 
 
    <a href="#">link</a> 
 
    </div> 
 
</div>

来源

2017-10-10 20:53:14

thhanks但文本对齐属性不会在主容器中水平和垂直居中。无论如何感谢 –

这可能是因为你使用绝对位置，是你想要的以上？ –

是的Kartik。上述几乎接近我追逐，除非我坚持让它响应。绝对位置似乎是一个问题，但我会探索你的选择以及..再次感谢.. –

您应该添加：

.wrapper { 
    position: relative; 
}

来源

2017-10-10 20:53:34 tomsmithweb

OMg @tomsmithweb。你是一个传奇。非常感谢。它工作得很好。谢谢 –

也许这是你想有作为的最终结果是：

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
.wrapper { 
 
    display: flex; 
 
    width: 400px; 
 
    max-width: 100%; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    padding: 1px; 
 
    border: 1px solid #000; 
 
    border-radius: 5px; 
 
    box-shadow: 0 0 1px #000; 
 
} 
 

 
.wrapper > img { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    border-radius: 5px 0 0 5px; 
 
} 
 

 
.wrapper > .textblock { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-evenly; 
 
    width: 100%; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 

 
@media screen and (max-width: 400px) { 
 
    .wrapper { 
 
    flex-direction: column; 
 
    height: 400px; 
 
    padding: 0; 
 
    border: none; 
 
    box-shadow: none; 
 
    } 
 
    .wrapper > img { 
 
    border-radius: 0; 
 
    } 
 
    .wrapper > .textblock { 
 
    background: Khaki; 
 
    } 
 
}

<div class="wrapper"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-400-400-9.jpg" alt="img1"> 
 
    <div class="textblock"> 
 
    <h2>Title</h2> 
 
    <p>Some paragraph here.</p> 
 
    <a href="#">Link</a> 
 
    </div> 
 
</div>

调整浏览器窗口400像素宽以下看到它“在行动”。

来源

2017-10-10 22:46:56 VXp

如何在包裹在母亲中的div中居中文本div

回答

相关问题