如何水平居中DIV

如何使用此URL上的文本框和按鈕來水平居中DIV：http://tinyurl.com/d4lpyh5？如果你做這種：如何水平居中DIV

問候，凱文

2012-05-21 www.data-blogger.com

您定位了哪些瀏覽器？ –

您的HTML有幾個錯誤，從沒有文檔類型開始。先嚐試清理，然後再進行定位。 – j08691

在第10行，你應該寬度添加到div：變化

<div style="margin-left: auto; margin-right: auto;">

到

<div style="margin-left: auto; margin-right: auto;width: 700px;">

編輯方式，您將不得不將輸入元素的寬度更改爲固定像素值，而不是width: 30%;

來源

2012-05-21 18:23:08

margin-left：auto;和margin-right：自動將剩餘寬度減半，結果元素居中。這會讓你更接近，但這不是一切。（不幸的是它並沒有，雖然它是正確的改變外觀哪怕是一點點。）

原因元素不看尚未中心是該元素是默認的容器/屏幕的整個寬度。因此，要進行水平居中工作，您不僅需要指定左側和右側的自動邊距，還需要進一步明確設置元素的寬度。

人們希望能夠指定類似「width：minimum-needed;」的東西。所以它會自動調整，無論它包含什麼......但CSS中沒有這樣的事情。我知道的唯一方法就是明確地指定元素的寬度，這對於你知道它的內容是有意義的。

所以下面例如是你的代碼修改，所以它看起來像我的理解你的願望（這裏可能有一個額外的<div>，你可能想要封裝這些信息在你的樣式表中......但你得到的想法）：

<html> 
<head> 
<title>Page</title> 
<link rel="stylesheet" href="http://145.120.12.115/project/css/main.css"></link> 
<meta name="viewport" content="width=device-width" /> 
</head> 
<body> 
<div class="top"></div> 
<div class="search"> 
    <div style="margin-left: auto; margin-right: auto; width: 40ex;"> 
     <input type="text" id="q" name="q" value="" style="width: 30ex;"/> 
     <input type="submit" class="blueButton button" value="Search" /> 
    </div> 
</div> 
</body> 
</html>

來源

2012-05-21 18:53:27

試試這個。

<center> 
<input type="text" /> 
</center>

來源

2012-05-23 11:09:05

如何水平居中DIV

回答

相關問題