| Autor | Zpráva | ||
|---|---|---|---|
| marko Profil * |
#1 · Zasláno: 7. 5. 2023, 13:16:58
Ahoj, vedel by mi niekto pomôcť, ako by som docielil, aby score box bol pevne zarovnaný na stred a nehýbal by sa mi podľa toho ako dlhý je názov mužstva?
Nižšie prikladám CSS aj HTML. Ďakujem za rady. CSS: .match-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
border: 1px solid #6A6A6A;
border-radius: 10px;
padding: 7px;
flex-wrap: nowrap;
}
.team {
display: flex;
align-items: center;
justify-content: center;
}
.team-name {
font-size: 14px;
font-weight: bold;
text-align: center;
margin-right: 10px;
}
.team-logo {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
border: 1px solid #626262;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
padding: 5px;
}
.team-logo img {
max-width: 100%;
max-height: 100%;
}
.score-container {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
flex-basis: 120px;
text-align: center;
}
.score {
font-size: 30px;
font-weight: bold;
text-align: center;
color: #6C0F0F;
font-family: Open Sans;
padding: 5px 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 767px) {
.match-container {
flex-wrap: wrap;
justify-content: center;
}
.team {
margin-right: 5px;
margin-bottom: 10px;
}
.score {
font-size: 24px;
padding: 5px 10px;
}
.team-name {
font-size: 12px;
margin-right: 0;
text-align: center;
}
.team-logo {
margin-right: 0;
margin-bottom: 5px;
width: 35px;
height: 35px;
}
.score-container {
flex-basis: 80px;
}
}HTML: html kód 1
<div class="match-container">
<div class="team team-a">
<div class="team-name">CHJK F. Žirafa</div>
<div class="team-logo"><img src="https://www.barsafutsal.sk/wp-content/uploads/2023/05/no-logo-team-v4.png" alt=""></div>
</div>
<div class="score-container">
<div class="score">7 - 4</div>
</div>
<div class="team team-b">
<div class="team-logo"><img src="https://www.barsafutsal.sk/wp-content/uploads/2023/05/De-Luxe-x100.jpg" alt=""></div>
<div class="team-name">De Luxe</div>
</div>
</div>
html kód 2
<div class="match-container">
<div class="team team-a">
<div class="team-name">Sporting Solinky</div>
<div class="team-logo"><img src="https://www.barsafutsal.sk/wp-content/uploads/2023/05/sporting-solinky-x80.jpg" alt=""></div>
</div>
<div class="score-container">
<div class="score">5 - 3 </div>
</div>
<div class="team team-b">
<div class="team-logo"><img src="https://www.barsafutsal.sk/wp-content/uploads/2023/05/mirupo-zilina-logo.jpg" alt=""></div>
<div class="team-name">FC MIRUPO ZA</div>
</div>
</div> |
||
| RastyAmateur Profil |
#2 · Zasláno: 7. 5. 2023, 22:26:29
Nejjednodušší řešení bude tomu elementu obsahujícímu název klubu nastavit nějakou pevnou šířku. On se pak ten text roztáhne hezky uvnitř tohoto elementu a nebude ti hýbat se zbytkem, s tím jeho okolím...
|
||
|
Časová prodleva: 12 měsíců
|
|||
0