• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyśrodkowanie oraz rozszerzenie tekstu w CSS

VPS Starter Arubacloud
0 głosów
301 wizyt
pytanie zadane 8 września 2022 w HTML i CSS przez domelcio Użytkownik (960 p.)

Hejka, 

Mam pytanie jak mogę zrobić, użyć by te dwa ostatnie teksty po lewej mi je wyśrodkowało oraz trochę rozszerzyło?

Oto zdjęcia oraz HTML/CSS

To co mam:

image

 

To co chciałbym osiągnąć: 

image

 

Zdjęcie HTML/CSS:

image

.dane-kontaktowe {
   color: #FFFFFF;
   display: flex;
   justify-content: space-evenly;
   text-align: right;
   font-family: 'Prosto One';
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 150%;
   width: 40%;
}

.czcionka-text {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 150%;
}

.end {
    color: #969BA9;
    font-family: 'Montserrat';
    font-style: normal;
    text-transform: uppercase;
    display: flex;
justify-content: space-evenly;
    width: 40%;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.08em;
    padding-top: 88px;
}
HTML:

<div class="dane-kontaktowe">
            <div class="czcionka-kontakt">
                <h4>Napisz do nas, odpowiemy <br>lorem@ipsum.com</h4>
            </div>
            <div>
                <img src="poczta.png">
            </div>

            <div class="czcionka-kontakt">
                <h4>Zadzwoń do nas, doradzimy <br>+48 000 000 000</h4>
            </div>
            <div>
                <img src="telefon.png">
            </div>

            <div class="czcionka-kontakt">
                <h4> Odwiedź nas, zapraszamy ul. <br>ul. Lorem Ipsum 00 <br>00-000 Lorem Ipsum</h4>
            </div>
            <div>
                <img src="siedziba.png">
            </div>
        </div>
        <div class="end">
            <div>
                <h4>COPYRIGHTS 2021</h4>
            </div>

            <div>
                <h4>POLITYKA PRYWATNOŚCI</h4>
            </div>

            <div>
                <h4>CREATED BY</h4>
            </div>
            
            <div>
                <img src="SNWS.png">
            </div>
        
        </div>

 

1 odpowiedź

0 głosów
odpowiedź 8 września 2022 przez VBService Ekspert (254,880 p.)
wybrane 8 września 2022 przez domelcio
 
Najlepsza

Usuń width

.dane-kontaktowe {
  color: #FFFFFF;
  display: flex;
  justify-content: space-evenly;
  text-align: right;
  font-family: 'Prosto One';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  /* width: 40%; */
}

.czcionka-text {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
}

.end {
  color: #969BA9;
  font-family: 'Montserrat';
  font-style: normal;
  text-transform: uppercase;
  display: flex;
  justify-content: space-evenly;
  /* width: 40%; */
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.08em;
  padding-top: 88px;
}

 

komentarz 8 września 2022 przez VBService Ekspert (254,880 p.)

BTW, możesz zapisać krócej font w css-ie ( Font Shorthand )

.dane-kontaktowe {
  color: #FFFFFF;
  display: flex;
  justify-content: space-evenly;
  text-align: right;
  font: 400 normal 14px/150% 'Prosto One';
}

.czcionka-text {
  font: 400 normal 14px/150% 'Montserrat';
}

.end {
  color: #969BA9;
  font: 400 normal 18px/22px 'Montserrat';
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-evenly;  
  padding-top: 88px;
}

 

komentarz 8 września 2022 przez domelcio Użytkownik (960 p.)
OO ciekawe, dzięki na pewno będę używać. A jeszcze jedno a dokładnie o przybliżenie do siebie tych tekstów.

 word-spacing:  oddala nieprawdaż? A przybliżać?
komentarz 9 września 2022 przez VBService Ekspert (254,880 p.)
edycja 9 września 2022 przez VBService

Podajesz ujemną wartość dla atrybutów csswink

<div class="word-spacing-decreasing">
  Lorem ipsum
</div>
<div class="letter-spacing-decreasing">
  <span>Lorem</span> <span>ipsum</span>    
</div>
div {
  margin: 2em;
  font-size: 2em;
}
.word-spacing-decreasing {
  word-spacing: -1em;
}
.letter-spacing-decreasing span {
  letter-spacing: -0.15em;
}

 

Możesz poeksperymentować z różnymi innymi atrybutami i ujemną wartością, jak np.: margin, padding, text-shadow, top, bottom, left itd. laugh

<div>
  Lorem ipsum    
</div>
<div class="magic-negative-value">
  <div>Lorem ipsum</div> 
</div>
div {
  margin: 1em;
  font-size: 2em;
  border: 1px solid red;
}
.magic-negative-value div {
  margin-left: -2em;
  border: 2px dotted green;
  font-size: calc(100% - 5px);
}

 

1
komentarz 12 września 2022 przez domelcio Użytkownik (960 p.)

@VBService, Dobrze wiedzieć, że można używać ujemną wartość. Ostatecznie użyłem atrybutu gap: 2%;

Podobne pytania

+1 głos
1 odpowiedź 280 wizyt
pytanie zadane 16 sierpnia 2021 w HTML i CSS przez TomaszR Nowicjusz (170 p.)
+1 głos
4 odpowiedzi 210 wizyt
pytanie zadane 17 stycznia 2021 w HTML i CSS przez Greeenone Pasjonat (16,100 p.)
+1 głos
1 odpowiedź 126 wizyt
pytanie zadane 6 lutego 2021 w Systemy operacyjne, programy przez koleś34 Gaduła (3,270 p.)

92,770 zapytań

141,695 odpowiedzi

320,518 komentarzy

62,107 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...