Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Problem z pozycjonowaniem tekstu w buttonie

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Problem z pozycjonowaniem tekstu w buttonie

Post 14.04.2017, 10:33:31

Witam,
mam problem z pozycjonowaniem tekstu wewnątrz buttona, tzn dokładnie z jedną z pozycji. Próbowałem już na kilka sposób i niestety żaden nie działa. Aktualnie mój button wygląda tak:

Obrazek

A ja chciałbym, żeby ten tekst "Oleje" był troszeczkę niżej (może być nawet wyśrodkowany względem tego szarego prostokąta), niestety próbowałem już kilka znanych mi sposobów i nic nie pomogło, zawsze tekst przesuwał się razem z prostokątem, który potem wystawał poza obrys buttona.

HTML:
Kod: Zaznacz cały
<button id = "oferta" class = "oleje" ><div id = "TekstOferta" class = "opis" >Oleje</div></button>


CSS:
Kod: Zaznacz cały
#TekstOferta /*Formatowanie tekstu na buttonach*/
{
color:#c4d607;
font-size: 25px;
font-family: 'Helvetica';
font-weight: bold;
position: relative;
bottom: -40%;
left: -3%;
display: inline-block;
}
#oferta /*Główny wygląd buttona  */
{
width: 250px;
height: 250px;
border: solid;
border-width: 1px;
border-color: #000;
margin-right: 10px;   
}
.opis
{
width: 250px;
height: 50px;   
padding: 30px 3px 3px -1px;
background-color:#3f3f3e;   
}
.oleje
{
background: url(/images/oleje.png) no-repeat;   
background-position: center;
opacity: 1;
}


Prosiłbym o pomoc.
patri4rch
Posty: 7
Dołączył(a): 14.04.2017

Re: Problem z pozycjonowaniem tekstu w buttonie

Post 14.04.2017, 11:41:05

Witam. Najprostrzym sposobem jeśli w butonie jest jedna linijka dać mu line-height: wysokość buttona;
pablop76
Posty: 23
Dołączył(a): 13.04.2016

Re: Problem z pozycjonowaniem tekstu w buttonie

Post 14.04.2017, 12:42:19

W tym akurat co wkleiłem zdjęcie faktycznie jest 1 linijka tekstu, ale mam 9 takich buttonów i jeden niestety ma 2 linie tekstu. Po za tym line-height nie do końca rozwiązuje mój problem :/

EDIT:
przepraszam, faktycznie line-height pomógł tylko nie na ustawionej maksymalnie wielkości tylko dużo mniejszej :)
Bardzo dziękuję za pomoc.
patri4rch
Posty: 7
Dołączył(a): 14.04.2017


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50447 zarejestrowanych użytkowników.
Najnowszy użytkownik: Rustyaparl


Nasi użytkownicy napisali:

  • 935671 wiadomości
  • w 246584 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)