2013-02-11 3 views
2

У меня есть следующий код:Как центрировать элемент div в ASP.NET?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="Styles/TomsStyleSheet.css" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div class="centerBlock"> 
     <asp:GridView ID="GridView1" runat="server" CcsClass="center"> 
     </asp:GridView> 
    </div> 
    <br /> 
    <div class="centerBlock"> 
     <asp:Label ID="Label1" runat="server" Text="Enter Directory Path: "></asp:Label> 
     <asp:TextBox ID="TextBox" Width="200px" runat="server"></asp:TextBox> 
     <br /> 
     <br /> 
     <asp:Button ID="checksumBtn" runat="server" Text="Calculate Checksum" OnClick="CalculateChecksum" /> 
     <br /> 
     <asp:Label ID="errorMsg" runat="server" Text="" CssClass="error"></asp:Label> 
    </div> 
    </form> 
</body> 
</html> 

Вот CSS:

.centerBlock 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:50%; 
} 

То, что я пытаюсь сделать, это просто центр его ... горизонтально сейчас, но по вертикали также будет хорошо, так что это smack dab в середине страницы.

Я знаю, что это не проблема ссылки на внешнюю таблицу стилей, потому что CssClass = «ошибка» на последней строке отлично работает. Я также пробовал <div style="margin-left:auto;margin-right:auto;">, как в соответствии с this suggestion, но ничего не работает. Выход в настоящее время лево-оправдан, не центрирован. Я использую IE 7.

ответ

0

Как оказалось, просто освежает браузер, казалось, решить мою проблему. Я заметил, что когда я обновил свой CSS, он не подтвердил измененные значения в веб-браузере - когда я сделал «Правка-щелчок»> «Проверить элемент» в Chrome, он по-прежнему показывал старые значения, даже после остановки отладки, остановки сервера, или отключение и повторное открытие Visual Studio.

Я сделал поиск и наткнулся на this helpful post, который дал мне знать, что проблема связана с браузером.

3

Если вы хотите, чтобы это было именно в середине страницы, попробуйте следующее:

.centerBlock { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 50%; 
    height: 200px; 
    margin: -100px 0 0 -25%; 
} 

Смотрите эту jsFiddle demo.

Вам, очевидно, необходимо соответствующим образом отрегулировать высоту и верхнее поле.

+0

это тоже не работает для меня. Пробовал переключение на Chrome тоже и все еще не работает – user1985189

+1

Применяются стили? Вы можете проверить инспектор элементов Chrome. – BenM

+0

это не похоже ... когда я выбираю этот div, в разделе «Стили> Согласованные правила CSS» он показывает это: div {display: block; }, но для моего другого класса ошибок (который работает) он отображает правильный css – user1985189

1

Автомаркировки работают только в Internet Explorer, когда они находятся в стандартном режиме. В режиме quirks он будет эмулировать IE 5 и не поддерживать их.

Добавить Doctype, который будет вызывать стандартный режим. например

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

или

<!DOCTYPE html> 

Смотрите также

+0

У меня уже этот doctype: Попробовал заменить мою за твою и до сих пор не повезло. – user1985189

+0

Все остальные равны, чтобы тогда было сосредоточено. – Quentin