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

Wyśrodkowania diva w divie

VPS Starter Arubacloud
0 głosów
1,080 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,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?
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 802 wizyt
pytanie zadane 16 października 2016 w HTML i CSS przez Avenue Użytkownik (940 p.)
0 głosów
4 odpowiedzi 6,681 wizyt
pytanie zadane 21 września 2015 w HTML i CSS przez Duduś Początkujący (380 p.)
+1 głos
2 odpowiedzi 2,619 wizyt
pytanie zadane 30 lipca 2015 w HTML i CSS przez artimal Gaduła (4,800 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...