如何將圖片和文字居中在一個區塊內

我知道你可以通過賦予後者一個固定的寬度和margin: auto在一個塊的中心。但是，事先不知道文本的大小（實際文本內容可能會有所不同）。

enter image description here

到目前爲止，我已經得到了CSS：

.outer { 
    width: 400px; 
} 

.outer table { 
    border: 0; 
    width: 100%; 
} 

.outer table td { 
    vertical-align: middle; 
    text-align: center; 
} 

.outer table td p { 
    text-align: left; 
}

來源

2014-02-19 katspaugh

如果您提供的HTML也 –

什麼是你的HTML結構？ – MLeFevre

提供一個小提琴:) – Alberto

請看一看這個DEMO

這裏是我的CSS：

.block { 
    text-align: center; 
} 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
} 
.left { 
    float: left; 
}

說明一下：元素之前：

這是一種無形的元素僞元素，其用於更好垂直居中：它模擬一個0大小的行內塊元素，它與正常的行內塊元素（.centered）一起允許我們使用vertical-align。

UPDATE： 您可以設置高度.block怎麼看它會垂直居中： http://jsfiddle.net/jb5EJ/5/

更新2：這是接近：http://jsfiddle.net/jb5EJ/13/

來源

2014-02-19 10:59:32

謝謝！我已經編輯了一點（http://jsfiddle.net/jb5EJ/3/），它似乎做我想要的！ – katspaugh

但是你刪除了.block：之後，這就是爲什麼它想要完美的工作。 –

我無法看到有或沒有'.block：before'的區別，你能解釋它的作用嗎？無論如何，標記接受，謝謝！ – katspaugh

添加vertical-align:middle;到img太....另外，我建議加上height到outer類

<img src="some_src" style="vertical-align:middle;" /> I have some text too

demo to get u started

來源

2014-02-19 10:57:19 NoobEditor

結賬這個環節。我希望你能得到解決方案。

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

TLDR：，只有這個CSS就可以（水平和垂直）的位置絕對中心的元素：

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

來源

2014-02-19 11:03:01

有趣，謝謝！ – katspaugh

如果你喜歡這個答案 –

這不是完整的答案。重點是定位2個元素， - 圖像和文字。 –

如何將圖片和文字居中在一個區塊內

回答

相關問題