如何在包裹在母親中的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

回答

相關問題