Блог

Главная - Вопросы по программированию - как сделать так, чтобы заголовок a отображался в верхней части полей div в css

как сделать так, чтобы заголовок a отображался в верхней части полей div в css

#javascript #html #css

Вопрос:

Я пытаюсь включить некоторые рекомендации по играм на свой веб-сайт, и я пытаюсь разместить название над тремя коробками игр.

вот как это выглядит прямо сейчас. Мне нужно название в центре и над другими полями. введите описание изображения здесь

Вот код, который я использовал для этого:

HTML:

 <div class="second-box">


<div class="game-section">
  <h1 id="games"> Game Recommendations </h1>

 

<div class="box1">
  <p> This is the first game </p>
</div>
 
 <br> 
 <br>
<div class="box2">
    <p> This is the first game </p>
  </div>
<br>
<br>

<div class="box3">
    <p> This is the first game </p>
  </div>

  </div>


</div>

ниже приведен css-код для веб — сайта:

CSS:

 
.game-section{

  height: 400px; 
  align-content: center;
  width: 100%;
  background-color: darkkhaki;
  display: inline-flex;


  /* inline flex allows inside the game-section div allows the smaller divs to extend horizontally when inline block is displayed on each of them. */
}

#game{
  font-size: 23px;
}

.box1{
background-color: darkolivegreen;
grid-area: box1;
height:230px;
width: 250px;
display:inline-block;
margin: 20px;
 }




.box2{
background-color: rgba(108, 148, 39, 0.267);
grid-area: box2;
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}

.box3{
grid-area:box3;
background-color:rgb(104, 99, 26);
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}

/* The end of the game recommendation boxes. */

Ответ №1:

 .game-section{

  height: 400px; 
  align-content: center;
  width: 100%;
  background-color: darkkhaki;
  display: flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;


  /* inline flex allows inside the game-section div allows the smaller divs to extend horizontally when inline block is displayed on each of them. */
}

#game{
  font-size: 23px;
}

.boxes{
display:flex;
gap:1rem;
justify-content:center;
}
.box1{
background-color: darkolivegreen;
grid-area: box1;
height:230px;
width: 250px;
display:inline-block;
margin: 20px;
 }




.box2{
background-color: rgba(108, 148, 39, 0.267);
grid-area: box2;
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}

.box3{
grid-area:box3;
background-color:rgb(104, 99, 26);
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}

/* The end of the game recommendation boxes. */ 
 <div class="second-box">


<div class="game-section">
  <h1 id="games"> Game Recommendations </h1>

 <div class="boxes">

<div class="box1">
  <p> This is the first game </p>
</div>
 

<div class="box2">
    <p> This is the first game </p>
  </div>


<div class="box3">
    <p> This is the first game </p>
  </div>
</div>
  </div>


</div>

Комментарии:

1. Привет, это идеально, спасибо, не могли бы вы также выровнять коробки посередине?

2. отметьте это сейчас, просто добавьте justify-content:center в .поля

3. если это ответ на ваш вопрос, пожалуйста, отметьте его как принятый.

Ответ №2:

 .game-section{

  height: 400px; 
  align-content: center;
  width: 100%;
  background-color: darkkhaki;
  display: inline-flex;


  /* inline flex allows inside the game-section div allows the smaller divs to extend horizontally when inline block is displayed on each of them. */
}

#game{
  font-size: 23px;
  
}

.box1{
background-color: darkolivegreen;
grid-area: box1;
height:230px;
width: 250px;
display:inline-block;
margin: 20px;
 }




.box2{
background-color: rgba(108, 148, 39, 0.267);
grid-area: box2;
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}

.box3{
grid-area:box3;
background-color:rgb(104, 99, 26);
height:230px;
width: 250px;
display: inline-block;
margin: 20px;
}

h1{
width: 100%;
text-align: center;
background-color: darkkhaki;
margin: 0px!important;
}
/* The end of the game recommendation boxes. */ 
 <div class="second-box">
<div class ="textGame">
  <h1 id="games"> Game Recommendations: </h1>
</div>

<div class="game-section">


 

<div class="box1">
  <p> This is the first game </p>
</div>
 
 <br> 
 <br>
<div class="box2">
    <p> This is the first game </p>
  </div>
<br>
<br>

<div class="box3">
    <p> This is the first game </p>
  </div>

  </div>


</div>
Метки: ,