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

CSS Środkowanie Elementów!

VPS Starter Arubacloud
0 głosów
337 wizyt
pytanie zadane 27 sierpnia 2020 w HTML i CSS przez x_000 Obywatel (1,460 p.)

Siema oto moja strona

jak widać te divy nie są idealnie na środku oto mój kod:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Maciej Dębowski - Web Developer</title>
    <link rel="stylesheet" href="/style.css">
    <link rel="icon" href="https://cdn.glitch.com/bf58909b-a63d-4e48-9d20-5e9b70424416%2F480px-HTML5_logo_and_wordmark.svg.png?v=1598356140436" id="icon">
    <script src="/script.js" defer></script>
    <script src="https://kit.fontawesome.com/f6412110a3.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  </head>  
  <body> 
    <div class="welcome">
      <br><br>
      <div class="section-header">
          <h1 class="welcome-page">
            &ltMaciej Dębowski/&gt
          </h1>
          <p class="col-lg-6 text-left ml-sm-auto mr-sm-auto">
            Hej, jestem Maciej. Zajmuje się tworzeniem stron internetowych. Jestem troche młody, ponieważ mam 14 lat. Chodze do technikum programistycznego. Tworzeniem stron zajmuję się od 9 roku życia. Stworze stronę twoich marzeń! 
            <br>
            <button class="read-more-btn" data-toggle="modal" data-target="#aboutme">
              Czytaj więcej...
            </button>
          </p>
          
      </div>
      
    </div>
    <div class="widget">
       <h1 class="bigfont">
         Co Tworzę?  
       </h1>
       <div class="creativity-tile">
         <i class="fas fa-mobile-alt" style="font-size: 32px;"></i> <br>
         Portfolia
       </div>
       <div class="creativity-tile">
         <i class="fas fa-users" style="font-size: 32px;"></i> <br>
         Fora 
       </div>
      <div class="creativity-tile">
         <i class="fas fa-user-edit" style="font-size: 32px;"></i> <br>
         Inne...
       </div>
      <br><br>
      <div class="pricing-table col-lg-11">
        <div class="pricing">
          <h1>
            Portfolio
          </h1>
          Od: <span class="price_asc"><span class="small">PLN</span>799<sup>00</sup></span>
          <p class="lead description">
            Profesionalne portfolio dzięki któremu przyciągniesz do siebie swoich przyszłych klientów!
          </p>
          <button class="btn-contact" onclick="_$('https://m.me')">
            Zkontaktuj się ze mną...
          </button>
        </div>
        <div class="pricing text-center">
          <h1>
            Forum
          </h1>
          Od: <span class="price_asc"><span class="small">PLN</span>1899<sup>00</sup></span>
          <p class="lead description">
            Fajne forum które przyciągnie do ciebie twoją społeczność!
          </p>
          <button class="btn-contact" onclick="_$('https://m.me')">
            Zkontaktuj się ze mną...
          </button>
        </div>
        <div class="pricing">
          <h1>
            Inne.
          </h1>
          Od: <span class="price_asc"><span class="small">PLN</span>799<sup>00</sup></span>
          <p class="lead description">
            Stwórz projekt strony internetowej, wycenie go i wykonam!
          </p>
          <button class="btn-contact" onclick="_$('https://m.me')">
            Zkontaktuj się ze mną...
          </button>
        </div>
      </div>
    </div>
    <div class="widget skills">
      <div class="header">
        <h1 class="skills-h1">
          Moje Umiejętności
        </h1>
        <div class="show">
          
        </div>
      </div>
    </div>
    <!--<div class="sticker sticky-right">
       <button class="nav-open">
          <i class="fas fa-bars"></i>
          
       </button>
       <div class="sidebar-navigator sticky-right">
           <span style="position: absolute; margin-left: 10px; top: 38px; border-bottom: 3px solid white;"><b>Maciej Dębowski</b></span>
           <ul class="sidebar-list">
              <li><a href="#Omnie">O Mnie</a></li>
              <li><a href="#CoTworze">Co Tworze</a></li>
              <li><a href="#Prace">Stworzone przez mnie</a></li>
              <li><a href="#Recenzje">Recenzje</a></li>
           </ul>
       </div>
    </div>-->
    <div class="modal fade" id="aboutme">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">
              Maciej Dębowski.
            </h5>
            <button class="close" data-dismiss="modal">
              &times;
            </button>
          </div>
          <div class="modal-body">
            Hej, jestem Maciej. Zajmuje się tworzeniem stron internetowych. Jestem troche młody, ponieważ mam 14 lat. Chodze do technikum programistycznego. Tworzeniem stron zajmuję się od 9 roku życia. Stworze stronę twoich marzeń! 
            Obecnie przeszedłem 3 kursy programowania stron internetowych (giganci programowania poziom: zwykły, zaawansowany, expert). Potrafie stworzyć wygląd strony w frameworku (Bootstrap) lub "czysto" czyli samym językiem programowania "css".
            <br><br>
            <form class="text-right">
              <button class="btn btn-danger">
                Zamknij
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>
@import url('scroll.css');

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 100;
  z-index: 10;
  overflow-x: hidden;
}
button,input,textarea{
  outline: none!IMPORTANT;
}
.welcome{
  text-align: center;
  height: 70vh;
  background: url('https://cdn.glitch.com/bf58909b-a63d-4e48-9d20-5e9b70424416%2Fphoto-1555066931-4365d14bab8c.webp?v=1598356787144');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  color: white;
}
.welcome .section-header h1{
  font-size: 140px;
  font-weight: 100;
}
.welcome .section-header h3{
  font-size: 48px;
  font-weight: 100;
}
.widget{
  text-align: center;
  background: #ddd;
  
}
.read-more-btn{
  background: #0afa96;
  color: white;
  border: 2px solid #0afa96;
  border-radius: 12px;
  font-weight: 600px;
  padding: 5px 25px;
  margin-top: 15px;
  transition: .3s;
}
.read-more-btn:hover{
  background: transparent;
  color: #0afa96;
}
.bigfont{
  font-size: 130px;
  font-weight: 100;
}
.creativity-tile{
  min-width: 15%;
  display: inline-block;
}
.pricing{
  width: 360px;
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  height: 60vh;
  margin: 70px;
  padding: 20px;
  border-top: 10px solid transparent;
  transition: .3s;
  margin-top: 150px;
}
.pricing-table{
  height: 110vh;
}
.pricing:hover{
  transform: scale(1.15);
}
.price_asc{
  font-size: 72px;
}
.price_asc .small{
  font-size: 24px;
}
.price_asc sup{
  font-size: 48px;
}
.btn-contact{
  padding: 6px 30px;
  border: 2px solid #0afa96;
  color: white;
  background: #0afa96;
  border-radius: 12px;
  margin-top: 60%;
  transition: .3s;
}
.btn-contact:hover{
  color: #0afa96;
  background: transparent;
}
/*.nav-open{
  background: transparent;
  color: white;
  border:0;
  position: absolute;
  top:40px;
  right:50px;
  outline: none!important;
  z-index: 999;
}
.sidebar-navigator{
  background: #000;
  width: 10%;
  position: absolute;
  top:0;
  right:0;
  height: 100vh;
  z-index: 9;
  color: white;
}
.sidebar-navigator ul{
  margin-top: 10vh;
  text-align: center;
}
.sidebar-navigator ul li{
  padding: 5px;
  transition: .3s;
}

.sidebar-navigator ul li:hover{
  background: #333;
}
.sidebar-navigator ul li a, .sidebar-navigator ul li a:hover{
  color: white;
  text-decoration: none;
}*/

/*media*/
@media only screen and (max-width: 600px){
  .welcome .section-header h1, .bigfont{
    font-size: 70px;
    font-weight: 100;
  }
}
@media only screen and (max-width: 300px){
  .welcome .section-header h1, .bigfont{
      font-size: 40px;
      font-weight: 700;
    }
}
@media only screen and (max-width: 1555px){
  .pricing{
    margin-top: 30px;
    margin: 70px;
  }
  .pricing:nth-child(1){
    margin: 70px;
  }
}
@media only screen and (max-width: 842px){
  .pricing{
    width: 360px!important;
    margin-top: 30px;
  }
  .pricing:nth-child(3){
    width: 360px!important;
  }
}
@media only screen and (max-width: 556px){
  .pricing{
    width: 250px;
    height: 60vh;
  }
}
@media only screen and (max-width: 315px){
  .pricing{
    display: none;
  }
}

Co zrobić żeby były na środku idealnie?

1
komentarz 27 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Stworze stronę twoich marzeń!

Obecnie przeszedłem 3 kursy programowania stron internetowych (giganci programowania poziom: zwykły, zaawansowany, expert). Potrafie stworzyć wygląd strony w frameworku (Bootstrap) lub "czysto" czyli samym językiem programowania "css".

Polecam nabrać pokory. Dziwnie to wygląda, gdy w portfolio piszesz, że potrafisz stworzyć wygląd strony w CSS i znasz do niego framework, a pytasz o to jak wyśrodkować element. ;)

komentarz 27 sierpnia 2020 przez Szczepan Micek Początkujący (280 p.)
przeniesione 27 sierpnia 2020 przez ScriptyChris
Ten kod jest strasznie nieprzejrzysty ciężko się w nim połapać polecam używać <section> <aside> <footer>strona z samych div-ów. Nie jestem profesjonalista ale ja jak się uczyłem w kursach na udemy mówili żeby nie używać tylko div-ow a do tego używanie !IMPORTANT w css nie jest polecane i możliwe że to psuje ustawienia  tej strony.
komentarz 27 sierpnia 2020 przez x_000 Obywatel (1,460 p.)
KU*WA mam 13 lat no i się ucze prosze tylko pomoc z tymi walonymi 3 divami o "jakość kodu" będę prosił później!
komentarz 27 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

@Maciej Dēbowski, proszę o zachowanie kultury wypowiedzi. Jeśli ktoś daje Ci rady, z których akurat teraz nie potrzebujesz korzystać nie oznacza, że trzeba odpowiadać agresywnym tonem.

komentarz 27 sierpnia 2020 przez x_000 Obywatel (1,460 p.)

@ScriptyChris, 1. to strona dla mnie nie publiczna

komentarz 27 sierpnia 2020 przez x_000 Obywatel (1,460 p.)
opublikuje jak sie doucze
komentarz 27 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Nie ma znaczenia, czy będziesz tę stronę publikować czy nie - w ogóle nie chodzi o projekt ani kod. Zwróciłem Ci uwagę, ponieważ wypowiedziałeś się w agresywny sposób - a tego na forum nie tolerujemy (punkty II.1.B i II.1.H regulaminu).

komentarz 27 sierpnia 2020 przez x_000 Obywatel (1,460 p.)
zrobiłem tzw. cenzure nie było pełnego słowa

2 odpowiedzi

+3 głosów
odpowiedź 27 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Rodzic tych kolumn za sprawą klasy col-lg-11 ma przez Bootstrapa nałożony styl max-width: 91.666667%;, który powoduje, że z prawej strony parenta jest odstęp, który optycznie niweluje efekt centrowania kolumn.

komentarz 27 sierpnia 2020 przez x_000 Obywatel (1,460 p.)
thx
0 głosów
odpowiedź 27 sierpnia 2020 przez JAKUBW Nałogowiec (33,470 p.)
Czmu nie użyjesz display: flex oraz justify-content: space-evenly;?
komentarz 27 sierpnia 2020 przez x_000 Obywatel (1,460 p.)

dodałem do elementu matki i dalej to samo

Podobne pytania

0 głosów
4 odpowiedzi 736 wizyt
pytanie zadane 1 października 2017 w HTML i CSS przez hakiros54 Obywatel (1,160 p.)
+1 głos
2 odpowiedzi 236 wizyt
pytanie zadane 5 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,490 p.)
0 głosów
1 odpowiedź 354 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...