Jak wyśrodkować menu w DIV-ie ? Szukam pomocy

pytanie zadane 2 czerwca 2016 w HTML i CSS przez Ardian Początkujący (290 p.)

Witam , mam pytanie jak w załączonym obrazku , jak wyśrodkować taki element w CSS.

div

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>strona testowa</title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	<link rel="stylesheet" href="style.css" type="text/css" >
   
</head>

<body>
	<div id="main">
        <div class="header">
           
                <div class="logo">Test</div>
            
        
        <div class="menu">

        <div class="button">Opcja1</div>
        <div class="button">Opcja2</div>
        <div class="button">Opcja3</div>
        <div class="button">Opcja4</div>
        <div class="button">Opcja5</div>
        <div style="clear:both"></div>
        </div>
        
      <div class="content">

 test test test  test test test  test test test  test test test 
 test test test  test test test  test test test  test test test 



      </div>

      <div class="footer">ddddd</div>
    </div>
    
	
</body>
</html>


body
{   
    background-color: blue;
    margin: 0 !important;
}


.main
{
    width:100%;
    
}
.header
{   
    color: white;
    width:100%;
    padding: 40px 0;
    
}

.logo
{   
        width: 500px;
	margin-left: auto;
	margin-right: auto;
        
}



.menu
{
    width:100%;
    background-color: yellow;
    padding:10px 0;
    text-align: center;
    
}

.button
{   
    width:100px;
    float:left;
    text-align: center;
    padding: 10px ;
    
}

.content
{
    width:1000px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    color: white;
}


.footer
{
    width:100%;
    text-align: center;
    background-color: black;
}

2 odpowiedzi

odpowiedź 2 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 2 czerwca 2016 przez Ardian

Najlepsza

W CSS dla .button:

.button {
  width: 100px;
  /*float: left;*/
  display: inline-block;
  /*text-align: center;*/
  padding: 10px;
  color: black;
  margin: 0 auto;
}

Zamiast float: left; dajesz display: inline-block oraz margin: 0 auto; Wtedy też text-align: center; chyba jest zbędne.

komentarz 2 czerwca 2016 przez Ardian Początkujący (290 p.)

dzięki wielkie , działa !

odpowiedź 3 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)

Nie buduj menu na blokach ;-; do tego służy znacznik ol/ul

komentarz 4 czerwca 2016 przez Ardian Początkujący (290 p.)

Chciałbym w tych DIV-ach zrobić buttony do mediów społecznościowych , czy uważasz , że i tak lepiej użyć tutaj ol/ul ?

Pozdrawiam

komentarz 4 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)

Tak, jedna z odpowiedzi dlaczego lepiej używać znacznika ul/ol do tworzenia wszelkiego rodzaju menu(w tym odnośniki do social mediów)

For semantic correctness. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all manner of users who don't care solely about the presentation of the site understand your content better.