Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Div mitten över annan div?

Svara
2017-06-09, 16:19
  #1
x-power
Medlem
Hur får jag en grid (som innehåller en form) att vara mitten horisontellt och vertikalt över
HTML-kod: 
<div class="slick-slider banner-slider">


HTML-kod: 
  <div class="grid">

    <form action="" method="get" class="search">

      <div class="form__field">
        <input type="search" name="search" placeholder="What are you looking for?" class="form__input">
        <input type="submit" value="Search" class="button">
      </div>

    </form>

  </div>

<div class="slick-slider banner-slider">
    <div class="photo"
         style="background-image: url('sm1.jpg');">
    </div>
    <div class="photo"
         style="background-image: url('sm2.jpg');">
    </div>
    <div class="photo"
         style="background-image: url('sm3.jpg');">
    </div>
    <div class="photo"
         style="background-image: url('sm4.jpg');">
    </div>
    <div class="photo"
         style="background-image: url('sm5.jpg');">
    </div>
</div>
Citera
2017-06-09, 17:55
  #2
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av x-power
Hur får jag en grid (som innehåller en form) att vara mitten horisontellt och vertikalt över
HTML-kod: 
<div class="slick-slider banner-slider">


HTML-kod: 
  <div class="grid">

    <form action="" method="get" class="search">

      <div class="form__field">
        <input type="search" name="search" placeholder="What are you looking for?" class="form__input">
        <input type="submit" value="Search" class="button">
      </div>

    </form>

  </div>

<div class="slick-slider banner-slider">
    <div class="photo"
         style="background-image: url('sm1.jpg');">
    </div>
    <div class="photo"
         style="background-image: url('sm2.jpg');">
    </div>
    <div class="photo"
         style="background-image: url('sm3.jpg');">
    </div>
    <div class="photo"
         style="background-image: url('sm4.jpg');">
    </div>
    <div class="photo"
         style="background-image: url('sm5.jpg');">
    </div>
</div>
Det där räcker inte, hur ser din nuvarande css ut?
Citera
2017-06-09, 19:48
  #3
erkki17
Medlem
Kod:
.grid {
    width: 100px;
    margin: 0 auto;
} 
__________________
Senast redigerad av erkki17 2017-06-09 kl. 19:48. Anledning: Missade klassnotationen
Citera
2017-06-09, 20:47
  #4
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av erkki17
Kod:
.grid {
    width: 100px;
    margin: 0 auto;
} 
Enligt https://www.w3schools.com/css/css_align.asp bör du ju sätta en width på 50%, men ska du ha det på det där sättet med en fast bredd på formen kanske du kan wrappa div-griden i en annan div?

HTML-kod: 
<div class="center">
 <div class="grid">

    <form action="" method="get" class="search">

      <div class="form__field">
        <input type="search" name="search" placeholder="What are you looking for?" class="form__input">
        <input type="submit" value="Search" class="button">
      </div>

    </form>

  </div>
</div>

och css:
HTML-kod: 
.center{

margin: auto;
     width: 50%;
}

Nåt sånt kanske?
Citera
2017-06-09, 21:42
  #5
erkki17
Medlem
Citat:
Ursprungligen postat av Proton
Enligt https://www.w3schools.com/css/css_align.asp bör du ju sätta en width på 50%, men ska du ha det på det där sättet med en fast bredd på formen kanske du kan wrappa div-griden i en annan div?
Ptja, det var bara ett exempel på hur man kan göra. Kravet är ju att elementet som ska centreras har en bestämd bredd.
Citera
Svara

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback