CSS：如何在圖像

所有我想要做的就是中心我的文字垂直和水平方向上的IMG垂直和水平居中文本..CSS：如何在圖像

嘗試了很多東西，但沒有到目前爲止的工作：/

<div class="img_container"> 
    <img class="cover-image" src="img.jpg" alt="omg" /> 
    <h2> bla bla bla </h2> 
    </div> 

    .img_container { 
    width: 100%; 
    } 

    .img_container h2 { 
    margin: 0; 
    }

來源

2016-06-09 Unknown User

檢查這個[問題]（http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically）可能是你在找什麼 – T04435

只要使用位置絕對和翻譯。將是完美居中（水平和垂直）

.img_container { 
 
    position: relative; 
 
} 
 
.img_container img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.img_container h2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); /* iOS */ 
 
    transform: translate(-50%, -50%); 
 
}

<div class="img_container"> 
 
    <img class="cover-image" src="http://lorempixel.com/400/200/sports/" alt="omg" /> 
 
    <h2> bla bla bla </h2> 
 
</div>

來源

2016-06-09 09:00:12

非常感謝！沒有想到這個解決方案......這很好。 –

這是一個很好的解決方案，因爲您不需要知道元素的大小就可以完美地垂直和水平居中。歡迎您:) –

1）你可以簡單地把圖像在圖像容器的背景，簡單地給CSS屬性到圖像容器作爲

style="vertical-align:middle and text-align center"

或者

2）您可以使用這些類，讓你的工作完成。

.image { 
    position:relative; 
} 

.text { 
    left: 0; 
    position:absolute; 
    text-align:center; 
    top: 30px; 
    width: 100% 
}

其中的html代碼會像

<div class="image"> 
    <img src="sample.png"/> 
    <div class="text"> 
     Text of variable length 
    </div> 
</div>

來源

2016-06-09 09:00:50

這裏有一個很好的政黨成員做到這一點：css-tricks.com - Text Blocks Over Image。

基本上，你可以用position: absolute解決您的文本，然後移動它，你想與top，left等

來源

2016-06-09 09:04:06 QuidamAzerty

請參閱MarcosPérezGude的答案 - 在我看來，Marcos的答案增強了這個解決方案，更好，更適合我們現在使用的工具，而不是7年前該文章發佈時的工具。 .. –

然而，實現這個的另一種方式：

.img_container { 
 
    width: auto; 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 

 
.img_container h2 { 
 
    position: absolute; 
 
    top: 40%; /* adjust accordingly to suit requirements */ 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
}

<div class="img_container"> 
 
    <img class="cover-image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250" alt="omg" /> 
 
    <h2>Postioned Absolute</h2> 
 
    </div>

來源

2016-06-09 09:10:59 UncaughtTypeError

CSS：如何在圖像

回答

相關問題