CSS使文本中心

這是我的HTMLCSS使文本中心

<div class="logoArea"> 
      <img src="images/oifcoman-logo.jpg"/> 
      <div class="titleClass">Call Center Dashboard</div> 
     </div>

這是我的CSS

.logoArea { 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    border-radius: 4px; 
} 

.titleClass { 
    color: #343434; 
    font-weight: normal; 
    font-family: 'Ultra', sans-serif; 
    font-size: 36px; 
    line-height: 42px; 
    text-transform: uppercase; 
    text-shadow: 0 2px white, 0 3px #777; 
    margin:auto; 
    background-color:red; 
    width:40%; 
    top:10px; 
}

這是什麼結果： enter image description here

我希望它是這樣的： enter image description here

來源

2014-04-13 Marco Dinatsoli

[這] [1]後可能會有所幫助，請求似乎相似。 [1]：https://stackoverflow.com/questions/15376634/how-can-i-center-a-div-within-another-div – Kofi

嘗試使用：

<div class="logoArea" style="display:table-cell; vertical-align:middle"> 
      <img src="images/oifcoman-logo.jpg"/> 
      <div class="titleClass">Call Center Dashboard</div> 
     </div>

來源

2014-04-13 11:58:19 AlieN

但這並沒有工作。這個中心文本里面的div。不要將div居中父母 –

@MarcoDinatsoli編輯 – AlieN

您可以使用CSS垂直對齊：中如果元件TD（未DIV）或嘗試這一招：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

來源

2014-04-13 11:59:03 chung

垂直的高度。在我的情況下不會產生任何效果 –

vertical-align只會影響td元素（不是div）。 – chung

在我的情況下，沒有表 –

有解決這個幾個方法。這是對現有樣式進行最小更改的一個。

.logoArea img { 
    float: left; 
}

通常它需要在父窗口實際定心代碼的其他變化，但似乎你已經有其他的樣式順利。

編輯

的結果再次看，我有第二個想法。我的解決方案只適用於非動態元素（不會動態變化但保持不變的元素）。由於它看起來是一個標題，因此也是一個相對靜態的元素，所以我的解決方案可能仍然有效，只需在中心div中添加所需數量的padding-top即可。我不知道有多少，因爲在你的例子中你使用了一個非常大的字體大小，我不知道圖像的大小。

來源

2014-04-13 12:15:25 Gil

試試這個： HTML：

<div class="logoArea"> 
      <img src="http://i.stack.imgur.com/O3d6S.jpg?s=128&g=1"/> 
      <div class="titleClass">Call Center Dashboard</div> 
    <div style='clear:both;'></div>  </div>

CSS：

.logoArea { 
    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 
    border-radius: 4px; 
} 
.logoArea img {display:block;width:100px;height:100px;float:left;} 
.logoArea .titleClass {float:left;}

的JavaScript（必須包括jQuery的第一個）

$(document).ready(function(){ 
    var h=$('.logoArea').height();var ch=$('.logoArea .titleClass').height(); 
    var pTop=((h-ch)/2)+'px'; 
    $('.logoArea .titleClass').css('paddingTop',pTop); 
});

演示：http://jsfiddle.net/zcAjq/

來源

2014-04-13 12:16:01 chung

設置圖像float:left;和文字display:inline-block;和.logoAreatext-align:center;。

Working fiddle

來源

2014-04-13 12:38:58

CSS使文本中心

回答

相關問題