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

CSS Środkowanie Elementów!

Aruba Cloud - Virtual Private Server VPS
0 głosów
611 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 1,074 wizyt
pytanie zadane 1 października 2017 w HTML i CSS przez hakiros54 Obywatel (1,160 p.)
+1 głos
2 odpowiedzi 443 wizyt
pytanie zadane 5 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,510 p.)
0 głosów
1 odpowiedź 424 wizyt

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

62,670 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...