Ako vycentrovat 3 divy v jednom dive

baumax · Napísal **baumax**: 13.07.2016 12:16

Nedari sa mi, stale to taha dolava.
na obr. 1 je naznacene ako to chcem - http://i.imgur.com/1KUCCyG.png
a na obr. 2 ako mi to stale robi (hoci davam margin: 0 auto; ... stale mi to hadze cely ten div k lavej strane - http://i.imgur.com/pzpFSSr.png
ak do div container dam len text - pekne mi ten text zarovna na stred, ak obrazky, hned to cele hodi nalavo.

tu je cely kod, ktory tam pouzivam, len som ho hodil na prazdnu stranku:

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
* {
   margin: 0;
   padding: 0;
}
html, body {
   height: 100%;
}
body {
   margin: 0px;
   padding: 0px;
   font-family: 'Open Sans', sans-serif;
   font-size: 10pt;
   font-weight: 400;
   color: #8d8d8d;
   text-align: center;
}
   #page-wrapper {
   padding: 2em 0em 4em 0em;
   background: #FFF;
   border-top: 1px solid #47A665;
   border: 1px dashed navy;
}
#featured {
   overflow: hidden;
   padding-bottom: 1em;
   color: #717171;
   text-align:center;
   margin-left: auto; margin-right: auto; display:block; border: 1px solid red;
}
#featured img {
   margin-bottom: 1em;
}
#featured .box {
   padding-bottom: 1.5em;
}
#featured .title {
   margin-bottom: 2em;
}
#featured .title h2 {
   font-size: 2em;
   font-weight: 800;
   color: #333;
}
#featured .subtitle {
   padding-bottom: 1em;
   font-size: 1.3em;
   font-weight: 700;
   color: #333;
   text-align:center;
}
#featured #box1 {
   float: left;
   width: 282px;
   margin-right: 24px;
}
#featured #box2 {
   float: left;
   width: 282px;
   margin-right: 24px;
}
#featured #box3 {
   float: left;
   width: 282px;
}

</style>
</head>

<body>
<div id="page-wrapper">
<div id="featured" class="container">
    <div id="box1"> <a href="#"><img src="pictures/image1.jpg" alt="yopi.sk - Investovanie do kovov" /></a>
      <h2 class="subtitle">Investovanie do kovov</h2>
    </div>
        <div id="box2"> <a href="#"><img src="pictures/image2.jpg" alt="yopi.sk - Office Housing" /></a>
      <h2 class="subtitle">Office Housing</h2>
    </div>
    <div id="box3"> <a href="#"><img src="pictures/image3.jpg" alt="yopi.sk - Autoleasing" /></a>
      <h2 class="subtitle">Autoleasing</h2>
    </div>
</div>
</div>
</body>
</html>

Kraliček · Napísal **Kraliček**: 13.07.2016 12:29

.container som nenašiel v css, musí mať pevné zadanú šírku aby sa vedel automaticky vycentrovať

// Spojený príspevok Str 13.07.16 12:31

Text to zarovna lebo tam máš text-align:center

weroro · Napísal **weroro**: 13.07.2016 13:16

Kód:

<!doctype html>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
    html,*,body {
        box-sizing:border-box;
        margin:0;
        padding:0;
    }
    body {
        font: 16px sans-serif;
    }
    .page-wrapper {
        width:70%;
        margin:auto;
    }
    .container {
        padding:1em 0;
        overflow:auto;
        border:1px solid black;
    }
    .container div {
        width:30.3%;
        float:left;
        margin-left:1.2em;
    }
    .container div:last-child {
        margin-right:1.2em;
    }
    .container div img {
        width:100%;
        height:10em;
    }
    .container h2 {
        padding:.5em 0;
        text-align:center;
    }
</style>

<div class="page-wrapper">
    <div class="container">
        <div>
            <a href="#"><img src="pictures/image1.jpg" alt="yopi.sk - Investovanie do kovov"></a>
            <h2>Investovanie do kovov</h2>
        </div>
        <div>
            <a href="#"><img src="pictures/image2.jpg" alt="yopi.sk - Office Housing"></a>
            <h2>Office Housing</h2>
        </div>
        <div>
            <a href="#"><img src="pictures/image3.jpg" alt="yopi.sk - Autoleasing"></a>
            <h2>Autoleasing</h2>
        </div>
    </div>
</div>

baumax · Napísal autor témy **baumax**: 13.07.2016 13:33

sta mi to nejde ... toto ma teraz ako style:

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
   margin: 0;
   padding: 0;
}
html, body {
   height: 100%;
}
body {
   margin: 0px;
   padding: 0px;
   font-family: 'Open Sans', sans-serif;
   font-size: 10pt;
   font-weight: 400;
   color: #8d8d8d;
   text-align: center;
}
   #page-wrapper {
   padding: 2em 0em 4em 0em;
   background: #FFF;
   border-top: 1px solid #47A665;
   
   border: 1px dashed navy;

}
#featured {
   overflow: hidden;
   padding-bottom: 1em;
   color: #717171;
   text-align:center;
   margin-left: auto; margin-right: auto; display:block; border: 1px solid red;
}
#featured img {
   margin-bottom: 1em;
}
#featured .box {
   padding-bottom: 1.5em;
}
#featured .title {
   margin-bottom: 2em;
}
#featured .title h2 {
   font-size: 2em;
   font-weight: 800;
   color: #333;
}
#featured .subtitle {
   padding-bottom: 1em;
   font-size: 1.3em;
   font-weight: 700;
   color: #333;
   text-align:center;
}
#featured #box1 {
   float: left;
   width: 282px;
   margin-right: 24px;
}
#featured #box2 {
   float: left;
   width: 282px;
   margin-right: 24px;
}
#featured #box3 {
   float: left;
   width: 282px;
}
.container {
   margin: 0px auto;
   width: 1200px;
   border: 1px solid green;
}
/*********************************************************************************/
/* Image Style                                                                   */
/*********************************************************************************/
.image {
   display: inline-block;
}
.image img {
   display: block;
   width: 100%;
}
</style>
</head>

<body>
<div id="page-wrapper"> nieco nad tym, co je na stred centrovane
<div id="featured" class="container">
    <div id="box1"> <a href="#"><img src="pictures/yopi-image1.jpg" alt="yopi.sk - Investovanie do kovov" /></a>
      <h2 class="subtitle">text 1</h2>
    </div>
        <div id="box2"> <a href="#"><img src="pictures/yopi-image2.jpg" alt="yopi.sk - Office Housing" /></a>
      <h2 class="subtitle">text2</h2>
    </div>
    <div id="box3"> <a href="#"><img src="pictures/yopi-image3.jpg" alt="yopi.sk - Autoleasing" /></a>
      <h2 class="subtitle">text3</h2>
    </div>
</div>
</div>
</body>
</html>

a sleduj co to robi, nechapem to volne miesto napravo od posledneho obrazku a preto to nie je na stred vycentrovane: http://i.imgur.com/rlwx5PT.png

weroro · Napísal **weroro**: 13.07.2016 13:40

Ukážka http://kod.djpw.cz/btzb-

tu je zdroj http://kod.djpw.cz/btzb

baumax · Napísal autor témy **baumax**: 13.07.2016 13:48

dakujem
poslal som Ti sukromu spravu, stale to nejde, ked to dam na web, nechapem preco mi to hodi do lava stale ten obsah
dik

// Spojený príspevok Str 13.07.16 15:50

weroro píše:

Ukážka http://kod.djpw.cz/btzb-

tu je zdroj http://kod.djpw.cz/btzb

ale pozeram, ze moje spravy sukromne ti asi neprisli, stale su v caka na odoslanie, neviem dovod

hatto13 · Napísal **hatto13**: 13.07.2016 21:38

vymaz float:left, pridaj display:inline-block a pre .container text-align:center

ps: vyhni sa pouzivaniu ID v css

Lessik · Napísal **Lessik**: 14.07.2016 9:07

alebo si nastuduj flex..
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ako vycentrovat 3 divy v jednom dive

Podobné témy