Wyśrodkowania diva w divie

pytanie zadane 19 stycznia 2017 w HTML i CSS przez agit45 Obywatel (1,110 p.)

Czy ma ktoś pomysł jak wyśrodkować diva w divie nie za pomocą padding? Podrzucam kod. Pozdrawiam!

<!doctype html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<title>strona główna</title>
<link href="main.css" rel="stylesheet" type="text/css">
    <link rel="Shortcut icon" href="favicon.ico">
</head>
<body>
   
    <div id="wrapper">
    <div id="top">
        <div id="naglowek">
          <div id="logo">
           ABCDEFGH.com
            </div>
            
            
           <ol>
            <li><a href="#">Strona główna</a></li>
            <li><a href="#">Informacja</a></li>
            <li><a href="#">Autor</a></li>
            <li><a href="#">Rejestracja</a></li>
            <li><a href="#">BR</a></li>
            
            
            </ol>
            
       
        
        </div> <!--naglowek-->
       
        
    </div><!--top-->
    <div id="content">
        <div class="informacja">
        green
        
        
        </div>
        
        
        </div> <!--content-->
    <div id="content1">
        <div class="informacja">
        
        
        
        </div>
        
        
        </div> <!--content-->
      
      
    </div> <!--wrapper-->
    
    </body>
    </html>

body
{
    margin: 0;
    padding: 0;
    
    
    
}



#wapper
{
    
     height: 105vh;

width: 100%;
    
    
}

#top
{
    text-align: center;
background-color: #3B5998;
    height: 5vh;
    
}

#naglowek
{
   
width:80%;
  height: 5vh;
    float:left;
}

#logo
{
    float:left;
    width:20%;
    font-size: 36px;
    color: aliceblue;
 font-family: Alabama;
   
    line-height: 150%;
    
}



a
{
    
    text-decoration: none;
    
}


#content
{
    clear:both;
    background-color:#395BD4;
    height: 40vh;
     text-align: center;
  margin: auto;
    padding: 5vh;
    
    
    
  
    
    
}

.informacja
{
   width:80%;

    background: green;
 height: 40vh;
    margin: auto;
    
  
  

    
    
}


    
 #content1
{
    
    background-color:red;
    height: 40vh;
     text-align: center;
     padding: 5vh;

}



   
    
    
ol
{
   
    padding: 0;
    margin: 0;
    list-style-type: none;
   
    height: 35px;
    line-height: 300%;
    display: inline-block;
}
ol a
{
    color:white;
    text-decoration: none;
    display: block;
    font-size: 20px
}

ol>li
{
    float:left;
    width:150px;
    height: vh;
    background:#345291;
    border-right:2px dashed #203C78;
    
    
}


ol>li:first-child
{
    border-left:2px dashed #203C78;
}

komentarz 19 stycznia 2017 przez Vento Pasjonat (17,120 p.)

Rozumiem, że chodzi o diva z napisem green?

2 odpowiedzi

odpowiedź 19 stycznia 2017 przez Bosswell Nałogowiec (36,470 p.)

margin-left:auto;
margin-right:auto;

komentarz 19 stycznia 2017 przez agit45 Obywatel (1,110 p.)

div w środku wprawdzie wyśrodkowuje się ale tylko poziomo, a pionowo przylega do górnej granicy zewnętrznego diva

komentarz 19 stycznia 2017 przez Bosswell Nałogowiec (36,470 p.)
edycja 19 stycznia 2017 przez Bosswell

.inner { align-self: center; }

.zawartosc{display:flex;}

<div class="zawartosc">
<div class="inner"></div>
</div>

W divie inner umieszczasz tekst. Zostaje on wyśrodkowany pionowo.

komentarz 19 stycznia 2017 przez agit45 Obywatel (1,110 p.)

Dzięki za pomoc! Znasz może jakieś inne sposoby na takie wyśrodkowanie jak ten?

odpowiedź 19 stycznia 2017 przez Vento Pasjonat (17,120 p.)

Najłatwiej użyć flex'a

.informacja
{
  width:80%;
  background: green;
  height: 40vh;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

Dostępność:

http://caniuse.com/#search=flex

Tutaj masz całkiem ciekawy tutorial odnośnie flexa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

komentarz 19 stycznia 2017 przez agit45 Obywatel (1,110 p.)

Dzięki wielkie za pomoc! Znasz może jakieś inne sposoby na takie wyśrodkowanie jak ten?

komentarz 19 stycznia 2017 przez Vento Pasjonat (17,120 p.)

Chyba najlepszym sposobem jest używanie flex'a przynajmniej moim zdaniem. Jest już szeroko dostępny nawet IE11 go obsługuje, ale zawsze na wszelki wypadek możesz dodać składnie dla starszych przeglądarek:

https://css-tricks.com/using-flexbox/#article-header-id-1