Блог

Главная - Вопросы по программированию - Почему я не могу центрировать эти ссылки?

Почему я не могу центрировать эти ссылки?

#html #css

#HTML #css

Вопрос:

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

вот моя корзина -> http://jsbin.com/towemisa/1 /
вы можете нажать на «редактировать корзину» в правом верхнем углу

HTML

 <!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>

<body>
    <center>
    <div class="page">
      <div class="header">
        <h1> Evergreen </h1>
        <h3> Free information for you! </h3>
        <div class="sublinks">
            <a href="index.html">Home  |</a>
            <a href="contact.html">Contact  |</a>
            <a href="login.html">Login  |</a>
            <a href="register.html">Register</a> <br>
            <h3 style="color:white">Search</h3>
            <input type="text" size="30"/>
        </div>
      </div>
    </div>

    <div class="linkspart">
        <a href="index.html">Home</a>
        <a href="aboutus.html">About us</a>
        <a href="download.html">Download</a>
        <a href="gallery.html">Gallery</a>
    </div> 
    </center>
</body>

</html>

CSS

 body {
    background-color:#b2b200;
}

.page {
    width:1000px;
    height:auto;
}

.header {
    width:1000px;
    height:100px;
}

.header h1 {
    color:white;
    float:left;
    left: 45px;
}

.header h3 {
    color:grey;
    float:left;
    position:absolute;
    top:45px;
}

.header .sublinks {
    width:400px;
    height:90px;
    float:right;
    position:relative;
    margin-top:20px;
    margin-left:65px;
}

.header .sublinks a {
    text-decoration:none;
    color:white;
    position:relative;
    top: 10px;
}

.header .sublinks a:hover {
    color:black;
}

.header .sublinks h3 {
    position: absolute;
    top: 20px;
    left: 20px;
}

.header .sublinks input {
    position: relative;
    top: 17px;
    border-radius: 15px;
}

.linkspart {
    width:1000px;
    height: 40px;
    background-color:white;
    border-radius:10px;
}

.linkspart a {
    text-decoration:none;
    color:black;
    position:relative;
    top: 10px;
    margin-left: 50px;
}

Комментарии:

1. Пожалуйста, добавьте CSS и HTML в вопрос.

2. это в корзине, но, конечно, я это сделаю

3. большинство кодов, которые я использовал у профессора YouTube (запись в классе), другие коды, которые я сделал сам, так как я новичок (1 месяц hmtl css), я использую коды, которые я выучил с тех пор, даже если их 20 или 30, я использую их, но что вы говоритеэто правда, если я хочу узнать больше о CSS и HTML, я должен купить книгу или заплатить кому-нибудь, чтобы он научил меня, но, как будто у меня нет ничего, я пытаюсь улучшить в одиночку xD спасибо за совет

4. Вот подход, который я бы рекомендовал. Сначала начните с эскиза. Вы можете сделать рисунок вручную или в цифровом виде. Это не обязательно должно быть произведением искусства — просто приблизительное представление страницы, которую вы пытаетесь создать. Во-вторых, сначала создайте свой HTML-код для этой страницы. Затем разместите эскиз и код здесь или на других форумах и попросите комментарии о том, как можно улучшить вашу структуру HTML. Вы получите массу полезных советов, и вы и другие многому научитесь. В-третьих, как только вы укрепите свою структуру HTML, переходите к CSS.

5. Выбранное вами решение — это быстрое исправление нестабильной структуры HTML и CSS, а ссылки на панели навигации на самом деле не центрированы; они более смещены вправо. В любом случае, продолжая взламывать его и постепенно HTML и CSS станут вашей второй натурой.

Ответ №1:

Ваш код:

 .header .sublinks {
    width:400px;
    height:90px;
    float:right;
    position:relative;
    margin-top:20px;
    margin-left:65px;
}

Отредактированный код:

 .header .sublinks {
    width:400px;
    height:90px;
    float:right;
    position:relative;
}

У вас есть margin-top:20px; и margin-left:65px; установлено, поэтому вы не можете center использовать ссылки.
Просто удалите margin-left и margin-right

JSFiddle:

http://jsfiddle.net/YpLa8/

Ответ №2:

Это не сработает, потому что вы устанавливаете левое поле обтекающего div, поскольку вы установили ширину, она будет работать нормально, если вы установите margin значение auto 

 .header .sublinks {
width:400px;
height:90px;
float:right;
position:relative;
margin:auto;
}

Комментарии:

1. это работает хорошо, спасибо, но не могли бы вы быть более конкретным? в чем на самом деле была моя ошибка? я настроил эти поля так, чтобы они были более выровнены по заголовку «Evergreen»

2. как я упоминал в своем первом ответе, вы устанавливаете поле для переноса div. это означает, что он будет выталкиваться именно так далеко от левой стороны — однако вы можете установить верхний предел, чтобы сохранить его относительно заголовка