Не выходит поставить текст по центру

FotGOD · July 30, 2018

Всем привет. Начал учиться верстать, и столкнулся с такой проблемой, не получается поставить текст по центру в теге <nav>. В чем ошибка, почему не выходит, подскажите?

код html:

<body>

    <header class="conteiner">
        <h1>reverse obscurity</h1>
        <nav class="nav1">
            <ul class="menu">
                <li>
                    <a href="#">home</a>
                </li>
                <li>
                    <a href="#">services</a>
                </li>
                <li>
                    <a href="#">portfolio</a>
                </li>
                <li>
                    <a href="#">about </a>
                </li>
                <li>
                    <a href="#">links </a>
                </li>
                <li>
                    <a href="#">downloads </a>
                </li>
                <li>
                    <a href="#">blog </a>
                </li>
                <li>
                    <a href="#">contact</a>
                </li>


            </ul>
        </nav>

    </header>

    <section></section>
    <section></section>
    <footer></footer>



</body>

и код css:

body{
background-image: url(../images/bg.png);

}
h1{

    font-family: Monotype Corsiva;
    font-size: 36px;
    text-align: center;
    margin-top: 80px;
}
.conteiner{

  
    width: 1180px;
    margin:  0 auto;
    
}

nav{

    float: right;
    text-align: center;
    
}
.nav1{
background-color: #8d503d;
height: 58px;
width: 1180px;

}

.menu{

    display: block;
    margin: 0 auto;
    width: 1062px;
    text-align: center;
}
.menu li{

float: left;
display: block;
margin-right: 65px;
margin-left: 20px;

}



.menu li a{

    color: #fff;
    text-decoration: none;
  
}

AlexZaw · July 30, 2018

Во-первых, для ul не стоит задавать display:block; так как он и так блочный.
Во-вторых, если вы задали обтекание, то задавать еще и display:block; бессмысленно, так как поведение блока не изменится.

body{
  background-image: url(../images/bg.png);
  margin: 0;
}
h1{
  font-family: Monotype Corsiva;
  font-size: 36px;
  text-align: center;
  margin-top: 80px;
}
.conteiner{
  width: 1180px;
  margin:  0 auto;
}

nav{
  text-align: center;
  background-color: #8d503d;
  height: 58px;
  width: 1180px;
}

.menu{
  padding: 0;
  margin: 0 auto;
  width: 1062px;
  }

.menu li{
  display: inline-block;
  margin-right: 65px;
}
.menu li:last-child{
  margin-right: 0;
}

.menu li a{
  color: #fff;
  text-decoration: none;
}

FotGOD · July 31, 2018

19 часов назад, AlexZaw сказал:
Во-первых, для ul не стоит задавать display:block; так как он и так блочный.
Во-вторых, если вы задали обтекание, то задавать еще и display:block; бессмысленно, так как поведение блока не изменится.
body{
  background-image: url(../images/bg.png);
  margin: 0;
}
h1{
  font-family: Monotype Corsiva;
  font-size: 36px;
  text-align: center;
  margin-top: 80px;
}
.conteiner{
  width: 1180px;
  margin:  0 auto;
}

nav{
  text-align: center;
  background-color: #8d503d;
  height: 58px;
  width: 1180px;
}

.menu{
  padding: 0;
  margin: 0 auto;
  width: 1062px;
  }

.menu li{
  display: inline-block;
  margin-right: 65px;
}
.menu li:last-child{
  margin-right: 0;
}

.menu li a{
  color: #fff;
  text-decoration: none;
}

Благодарю за наставничество.

Sign In

Не выходит поставить текст по центру

Question

FotGOD

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

AlexZaw

Link to comment

Share on other sites

FotGOD

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information