Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Avatar
Petr Věříš:5. února 17:28

Dobrý den,

programuji svou stránku přes ASP .NET a snažím se aby jsem měl dva DIV vedle sebe. A aby byl text v jednom z DIV vertikálně vycentrovaný a aby se obsahy z DIV zarovnaly na opačnou strany (v právem DIV na levou stranu a v levém DIV na pravou stranu). Někde na internetu jsem četl, že CSS element float nepracuje s vertical-aling, ale pak nevím jak dosáhnout mého cíle. Zde je můj kód:

HTML:

<div id="parentDvouDivu" class="parentDvouDivu" style="width: 100%;">
                <div id="levyDiv" class="levyDiv">Potřebuji vycentrovat</div>
                <div id="pravyDiv" class="pravyDiv">
                    <asp:TextBox ID="textbox" runat="server" CssClass="txtbox" type="tel" MaxLength="5"></asp:TextBox>
                </div>
            </div>

CSS:

.parentDvouDivu:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
}

.levyDiv {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    height: 10vw;
    font-size: 4vw;
    color: white;
    text-align: right;
    font-family: Arial;
}

.pravyDiv {
    vertical-align: middle;
    display: inline-block;
    width: 50%;
    height: 10vw;
    text-align: left;
}

Děkuji za vaše odpovědi.

 
Odpovědět 5. února 17:28
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6. února 8:59

Muzu ti popsat situaci kdysi...
Vertikalni zarovnani, fungovalo u elementu P, (A, IMG), TD.
Float je nestabilni funkce. Kazdy prohlizec si ji vykresluje po svem. Jakoze, ne vzdy dobre (ty nove uz to zvladaji lepe)
V nekterych prohlizecich funguje display:inlene-block + vert. zarovnani.

Ve vsech novejsich by melo fungovat vsude u floatu. Nespolehal bych ale na zadny, ktery neni na tomto seznamu: IE, FF.
Melo by jit zmenit element na display:inline-block (P), display:table-cell (TD).

V kodu, ktery mas uvedeny, float nikde nepouzivas.

https://www.jakpsatweb.cz/…trovani.html
https://www.jakpsatweb.cz/…olution.html
(tohle je berlicka, co fungovala 15 let zpet)

V novych prohlizecich se da pouzivat flex layout
https://www.jakpsatweb.cz/…er-flex.html
display: flex
https://css-tricks.com/…-to-flexbox/

Editováno 6. února 9:00
 
Nahoru Odpovědět 6. února 8:59
Avatar
Odpovídá na Petr Věříš
Michal Štěpánek:6. února 9:07

Mrkni se na flexbox, to by tě mohlo "popostrčit" ke kýženému výsledku

Nahoru Odpovědět 6. února 9:07
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jiří Zeman
Člen
Avatar
Jiří Zeman:6. února 10:50

html

<div class="container">
  <div class="box-left">
    <h1>Nadpis 1</h1>
  </div>
  <div class="box-right">
    <h1>Nadpis 1</h1>
    <p>Odstavec v pravo</p>
     <p>Odstavec v pravo</p>
     <p>Odstavec v pravo</p>
     <p>Odstavec v pravo</p>
     <p>Odstavec v pravo</p>
  </div>
</div>

css

.container{
  display:flex;
  justify-content:center;
}
.box-left{
  display:flex;
  background-color:red;
  padding:50px;
  align-items:center;
}
.box-right{
  background-color:pink;
  padding:50px;
}

Něco takového?
Pro otestování zkus třeba codepen.io

Editováno 6. února 10:53
Nahoru Odpovědět  +1 6. února 10:50
Chybami se člověk učí.
Avatar
Odpovídá na Peter Mlich
Petr Věříš:6. února 14:31

Děkuji za odkazy Petře, ale mám tu ještě malý problém. Text v pravém boxu není zarovnaný vpravo i v případě, když použiji text-align: right. Zde je můj aktuální CSS kód:

.container {
    display: flex;
    justify-content: center;
    flex-direction: row;
        padding-top: 100px;
}

.left-box {
    display: flex;
    align-items: center;
    padding: 0px;
    order: 1;
    width: 50%;
    height: 10vw;
    font-size: 4vw;
    color: white;
    text-align: right;
    font-family: Arial;
    line-height: 38px
}

.right-box {
    padding: 0px;
    width: 50%;
    height: 10vw;
    text-align: left;
    line-height: 38px
}
 
Nahoru Odpovědět 6. února 14:31
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6. února 15:09

Nasel jsem tam asi 20 chyb.

  1. Zkus pouzit jsfiddle.net a dej tam tvuj kod html i css.
  2. Zkontroluj si, ze pouzivas spravne class. Zkopiruj si pres copy-paste z css kodu do html nazev classy, pak budou stejne, ikdyz tam mas preklep. (pouzil jsem html kod tady od nekoho, k temu pridal tvuj css kod a nesedeli mi nazvy class, treba, proto je dulezite videt, co mas ty a ne jen pulku cehosi, kde uz to v prvni zprave neplati)
  3. flexbox, jsem, ze stare skoly, nepouzivam. Ale, co jsem zkousel to css upravovat, tak tam bylo nekolik chyb, takze jsem presel k tabulkovemu stylu.

flex-direction:column;
flex-direction:row; /* left /
flex-direction:row; /
right */

4. a vyhazel jsem z toho kodu vse, co se netyka layoutu, treba zmena fontu pisma. Pismo budes mit stejne pro cely css, ne?

5. Je dobre, kdyz delas v podstate stejne boxy, tak pouzit stejnou definici.
.a, .b {...}
.b {...zmeny proti .a }

6. Zkousel jsi pouzivat css bootstrap? Treba by sis vystacil s jeho class. Pridas do stranky bt css, najdes v dokumentaci, jakou mas pouzit class a hotovo.
https://getbootstrap.com/…ntroduction/#…
https://getbootstrap.com/…layout/grid/

Editováno 6. února 15:12
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 6. února 15:09
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.