• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyśrodkowania diva w divie

Mały hosting, OGROMNE możliwości
0 głosów
1,486 wizyt
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

0 głosów
odpowiedź 19 stycznia 2017 przez Bosswell Nałogowiec (36,490 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,490 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?
0 głosów
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?
1
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

Podobne pytania

0 głosów
5 odpowiedzi 1,792 wizyt
pytanie zadane 16 października 2016 w HTML i CSS przez Avenue Użytkownik (940 p.)
0 głosów
4 odpowiedzi 7,210 wizyt
pytanie zadane 21 września 2015 w HTML i CSS przez Duduś Początkujący (380 p.)
+1 głos
2 odpowiedzi 3,271 wizyt
pytanie zadane 30 lipca 2015 w HTML i CSS przez artimal Gaduła (4,800 p.)

93,718 zapytań

142,631 odpowiedzi

323,262 komentarzy

63,266 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...