Q

如何在div中對齊文本？

html
css

2013-08-26 107 views 0 likes

0

在這個小提琴http://jsfiddle.net/QLCeH/文本不與標題「谷歌」對齊，文字包裝在圖像下面。如何在div中對齊文本？

這裏是小提琴代碼：

HTML：

<div style="margin-left:auto;margin-right:auto; width: 600px;"> 
<div id="block"> 
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /> 

<div style="font-size:20px;font-weight:bold;"> 
<a href="http://www.google.com">Google</a> 
</div> 
<div> 
This is some multi line text to show that multiple lines to not align very well. 
</div>

CSS：

*{ 
    margin:0; 
    padding:0; 
} 
#block { 
    border-width: 2px; 
    border-color: #4682B4; 
    background-color: WHITE; 
    width: 200px; 
    text-align: center; 
    line-height:30px; 
    padding:3px 0; 
    padding-right: 100px; 
    float:left; 
} 
img{ 
float:left; 
} 
#block:hover { 
    background-color: #C2DFFF ; 
}

如何可以將文本與頭「谷歌」，並對準防止它包裹之下圖片？

因此，它似乎是這樣的：

enter image description here

我試過文本對齊，但它似乎並沒有提供這種選擇的？

更新：

這是我現在使用的代碼：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title></title> 

<style type="text/css"> 
#block img{ 
    display:inline-block; 
    vertical-align: top; 
    width: 50px; 
} 
#text{ 
    display:inline-block; 
    vertical-align: top; 
    width: 350px;} 


</style> 

</head> 

<body> 

<div style="float: left;display: inline;width=450px" id="block"> 
    <img height="50" style="max-width: 50px;background:pink;;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /> 

    <div style="font-size:20px;font-weight:bold;" id="text"> 
     <a href="http://www.google.com">Google</a><br /> 
     <p>This is some multi line text to show that multiple lines to not align very well.</p> 
    </div> 

</div> 


<div style="float: left;display: inline;width=450px" id="block"> 
    <img height="50" style="max-width: 50px;background:pink;;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /> 

    <div style="font-size:20px;font-weight:bold;" id="text"> 
     <a href="http://www.google.com">Google</a><br /> 
     <p>This is some multi line text to show that multiple lines to not align very well.</p> 
    </div> 
<div> 


</body> 
</html>

當我將此代碼粘貼到IE8，這是輸出：

enter image description here

在Chrome這個是輸出： enter image description here

Chrome輸出是否正確，是否在IE8上使用不支持的CSS？

2013-08-26 blue-sky

+0

Offtopic，但你不希望'* {保證金：0;填充：0}'。這是一個非常糟糕的選擇器（相對）需要分配時間 – Martijn

+0

該圖像不會引起問題。你想要文本居中或div居中？ –

+0

你有'width = 450px;'但它應該是'width：450px;'。不知道它是否會有所幫助，但它的錯誤 – Martijn

A

回答

2

你要洗你的HTML位：

<div id="block"> 
    <img height="50" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /> 

    <div style="font-size:20px;font-weight:bold;" id="text"> 
     <a href="http://www.google.com">Google</a><br /> 
     <p>This is some multi line text to show that multiple lines to not align very well.</p> 
    </div> 
<div>

和匹配的風格（你不需要浮點數）：

#block img{ 
    display:inline-block; 
    vertical-align: top; 
    width: 50px; 
} 
#text{ 
    display:inline-block; 
    vertical-align: top; 
    width: 150px;; 
}

而且a jsFiddle example

2013-08-26 15:00:08 Martijn

+0

您的代碼似乎沒有在IE8中正確對齊它？ –

+0

我認爲它應該，沒有IE8在這裏。我一直這樣做，很確定這應該很好。 – Martijn

+0

哦，jsFiddle在IE8中不起作用，它不只是我的代碼:) – Martijn

0

將一個選擇器ID或類添加到您的文本，並添加一個填充。

.aligntext{ 
    padding-left: 40px; 
}

的jsfiddle：http://jsfiddle.net/QLCeH/4/

另一個（可能更清潔）方式分組在一個div右側部分（谷歌的標題和文字下面）和浮動的：http://jsfiddle.net/QLCeH/11/

2013-08-26 14:57:36

0

僅此行添加到你的CSS，它會解決你的問題：

div#block > div { text-align:left; margin-left:45px; }

2013-08-26 15:26:40

相關問題