Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] centrowanie w zależności od wskazanego elementu
stellatus
post 18.02.2020, 20:37:21
Post #1





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Kod
<div class="menu">
  <p class="menu-tags" >
    lorem ipsum
  </p>

  <p class="menu-dropdown_list1">
    dolor si amet
  </p>

</div>

Kod
.menu {
  display: flex;
  flex-direction: row;
  padding: 10px;
  background-color: DodgerBlue;
  flex-wrap: wrap;
}
.menu > p {
  padding: 10px;
  display: flex;
}

.menu-tags {
  background-color: red;
  width: 60px;
  text-align: center;
}
.menu-dropdown_list1 {
  background-color: green;
  flex-grow: 1;
  
}

https://codepen.io/rudolph-reti/pen/QWbEmJR

Jak wyśrodkować horyzontolnie zawartość zielonego <p> względem niebieskiego diva? Da się w ogóle to zrobić w CSS czy trzeba w JS?

Ten post edytował stellatus 18.02.2020, 20:55:32
Go to the top of the page
+Quote Post
vokiel
post 18.02.2020, 20:57:55
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


Powinno wystarczyć
  1. .menu > p {
  2. padding: 10px;
  3. display: flex;
  4.  
  5. align-items: center;
  6. }


--------------------
Go to the top of the page
+Quote Post
stellatus
post 18.02.2020, 21:51:26
Post #3





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Nie działa. Centruje wertykalnie.
Go to the top of the page
+Quote Post
aras785
post 18.02.2020, 22:27:42
Post #4





Grupa: Zarejestrowani
Postów: 859
Pomógł: 177
Dołączył: 29.10.2009

Ostrzeżenie: (0%)
-----


https://jsfiddle.net/bd50gcw9/
Go to the top of the page
+Quote Post
stellatus
post 19.02.2020, 09:24:24
Post #5





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Dzięki!
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 11:54