» »

css bootstrap tezava (align content center)

css bootstrap tezava (align content center)

zbrisan ::

<div class="jumbotron jumbotron-fluid margin_jumbo margin_dol" style="background-image: url(../img/parallax.jpg);">

    <div class="container row margin_dol_vec align_center">
        <div class="col-md-3 col-sm-12">
            <h1 class="text-center"><b class="xx-pink">Razvoj</b></h1>
            <p class="text-white text-center">blablabla.</p>
        </div>
        <div class="col-md-3 col-sm-12">
            <h1 class="text-center"><b class="xx-pink">Vizija</b></h1>
            <p class="text-white text-center">blablabla</p>
        </div>
        <div class="col-md-3 col-sm-12">
            <h1 class="text-center"><b class="xx-pink">Kakovost</b></h1>
            <p class="text-white text-center">blablabla</p>
        </div>
    </div>
</div>



 screenshot

screenshot



Ne znam postavit te 3 paragrafe na sredino strani, kot je vidno na sliki se alignajo po defaultu na levo col-i so veliki po tri tako da z offset-md-xx ne gre, probal sem narediti se ".align_center" tem pa ni bilo razlike, v cem je tezava? Sumim da zato ker je "jumbotron-fluid", da se zato bolj cudno obnasa. Kaksna ideja?

.align_center {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

amacar ::

https://jsfiddle.net/qydho4vk/2/



<div class="jumbotron jumbotron-fluid margin_jumbo margin_dol" style="background-image: url(../img/parallax.jpg);">
 
    <div class="container row margin_dol_vec row-centered">
        <div class="col-md-3 col-sm-12 col-centered">
            <h1 class="text-center"><b class="xx-pink">Razvoj</b></h1>
            <p class="text-white text-center">blablabla.</p>
        </div>
        <div class="col-md-3 col-sm-12 col-centered">
            <h1 class="text-center"><b class="xx-pink">Vizija</b></h1>
            <p class="text-white text-center">blablabla</p>
        </div>
        <div class="col-md-3 col-sm-12 col-centered">
            <h1 class="text-center"><b class="xx-pink">Kakovost</b></h1>
            <p class="text-white text-center">blablabla</p>
        </div>
    </div>
</div>


.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

Zgodovina sprememb…

  • spremenil: amacar ()

zbrisan ::

Hvala :)

Dpool ::

Nisem Web developer, ampak me zanima.. nastavljanje marginov s PX je pri vas OK? To bo drugače prikazovalo na različnih rezolucijah zaslona. Naprimer na mojem 1080p laptopu se Razvoj prekriva z Vizija.

Haniball ::

Dpool je izjavil:

Nisem Web developer, ampak me zanima.. nastavljanje marginov s PX je pri vas OK? To bo drugače prikazovalo na različnih rezolucijah zaslona. Naprimer na mojem 1080p laptopu se Razvoj prekriva z Vizija.


Pixli so dejansko OK. Relativne enote (em in rem) imajo namreč precej redek use-case.

En zanimiv članek na to temo: https://hackernoon.com/rems-and-ems-and...

zbrisan ::



Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1298345939 (5076) sunniegoldie
»

meni razporejen po celotni dolžini

Oddelek: Izdelava spletišč
72228 (2096) XzupanX
»

Kontaknti obrazec - potrebujem pomoč

Oddelek: Programiranje
181151 (873) cobrica
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519824 (7623) nuuush
»

Poravnava znotraj DIV

Oddelek: Izdelava spletišč
91662 (1543) alum

Več podobnih tem