2017-10-10 33 views
0

我正在嘗試將包含在主容器中的圖像旁邊的一段文本居中。因爲某些原因。我有一個黑色的文字集中在頁面中間的容器外。如何在包裹在母親中的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居中置於頁面中間。不在容器中。

有沒有什麼好的方法讓我擺脫這個困境? 在此先感謝 米歇爾

回答

0

這裏是你問的第二個解決方案(使之成爲多張圖片/文本模式;我想你可能需要它):

* {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,儘管這個「趨勢」可能會在幾年內發生變化。

我添加了一些有用的評論,以獲得更好的解釋,如果您需要任何其他幫助,請讓我知道。

+0

非常感謝,非常感謝。 –

0

.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>

+0

thhanks但文本對齊屬性不會在主容器中水平和垂直居中。無論如何感謝 –

+0

這可能是因爲你使用絕對位置,是你想要的以上? –

+0

是的Kartik。上述幾乎接近我追逐,除非我堅持讓它響應。絕對位置似乎是一個問題,但我會探索你的選擇以及..再次感謝.. –

3

您應該添加:

.wrapper { 
    position: relative; 
} 
+0

OMg @tomsmithweb。你是一個傳奇。非常感謝。它工作得很好。謝謝 –

0

也許這是你想有作爲的最終結果是:

* {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像素寬以下看到它「在行動」。