Тег тега / фон не центрируется - PullRequest
Новая
       14

Тег тега / фон не центрируется

0 голосов
/ 16 января 2012

Я нахожусь на ранней стадии создания мобильной версии нашего веб-сайта, и у меня уже есть проблема с тегом div и фоном, который не центрируется.Код таблицы стилей выглядит следующим образом: 

<!DOCTYPE html>
<html><head>
<style type="text/css">
BODY{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; background-color:#fff;FONT-SIZE:12px;COLOR:#000000;FONT-FAMILY:Arial, Helvetica, sans-serif;}
header {
        display:block;text-align:center;width:100%;height:6.5em;
}

.topHeader {display:block; width:100%;  height:5.4em;}
#acdlogo {
    float:left;text-align:left; overflow:hidden; display:inline;
}

#acdHeadLinks {
    float:right;text-align:right;margin-top:5px;
}

.clearAll { clear:both; font-size:0; padding:0; margin:0; }

.search-bg {  
    text-align:center;width:85%;background-color:#265e99;
    height:45px;z-index:1000; border-radius:5px; -webkit-border-radius:5px;
}
</style>
</head>

Вот код, который появляется после кода таблицы стилей: 

<body>
<div>
  <header>
    <div class="topHeader" align="center">
            <div id="acdlogo">
            <a href="http://www.test.com/" title="Test"><img src="images/logo.gif" border="0" alt="Alt Text"></a>
            </div>
            <div id="acdHeadLinks">
                <a href="tel:8005551212"><img src="images/mcontact.png" border="0"></a><br>
                <a href="">Directions</a> <a href="">My Account</a> <a href="">My Cart</a>
            </div>
    </div>
        <div align="center" class="search-bg" id="searchgcs">
        hello world
    </div>

   </header>
</div>
</body></html>

Проблема заключается в том, что синий фон должен содержать поисковую системуформа, но это выравнивание по левому краю, а не по центру, и я не знаю, что мне нужно сделать, чтобы центрировать его.Я очень стараюсь не использовать таблицы.Кто-нибудь может помочь мне понять это?Спасибо!

ОБНОВЛЕНИЕ: Хорошо, у меня новая ошибка.Я пытаюсь отцентрировать изображение, используя теги div, и я ничего не получаю, даже с ответом ниже.Я даже урезал код, чтобы попытаться отцентрировать изображение и не идти.Изображение всегда выровнено по левому краю тега div, и я хочу, чтобы оно было отцентрировано.Вот мой код: 

<!DOCTYPE html>
<html><head><title></title>
<style type="text/css">
#mainImage {
    width:300px;
    margin:0 auto;
    padding:0;
}
img.curMainImage {
    max-height:240px;
    max-width:240px;
}

</style>
</head>
<body>
    <div id="mainImage"><img class="curMainImage" src="Image Here" border="0" /></div>
</body>
</html>

Кто-нибудь может помочь?

1 Ответ

0 голосов
/ 16 января 2012

добавить margin: 0 auto; к вашему .search-bg - http://jsfiddle.net/7djxY/1/

.search-bg {       
    text-align:center;
    width:85%;
    margin: 0 auto;
    background-color:#265e99;     
    height:45px;
    z-index:1000;
    border-radius:5px;
    -webkit-border-radius:5px;
}

Обновление: margin: 0 auto; используется для установки верхнего и нижнего полей на 0, а левого-правого полей на автоматический. В этом случае браузер автоматически обнаружит доступное пространство бокового поля и распределит его поровну слева и справа. И с одинаковыми полями с обеих сторон элемент становится центрированным.

...