NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.
Avatar
Petr Věříš
Člen
Avatar
Petr Věříš:5.2.2019 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.2.2019 17:28
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6.2.2019 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.2.2019 9:00
 
Nahoru Odpovědět
6.2.2019 8:59
Avatar
Michal Štěpánek
Člen
Avatar
Odpovídá na Petr Věříš
Michal Štěpánek:6.2.2019 9:07

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

Nahoru Odpovědět
6.2.2019 9:07
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:6.2.2019 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.2.2019 10:53
Nahoru Odpovědět
6.2.2019 10:50
Neaktivní uživatelský účet
Avatar
Petr Věříš
Člen
Avatar
Odpovídá na Peter Mlich
Petr Věříš:6.2.2019 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.2.2019 14:31
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6.2.2019 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.2.2019 15:12
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
6.2.2019 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.