中心選單、中心圖片、html、css-有解無憂

早上好。我是 html/css 和一般編程的新手，這是我的第一篇文章。下面是我目前的代碼。我想做三件事，但我目前無法做到：

將紫色選單與四個框居中：我試圖將導航欄移動到標題內，但沒有成功。
將紅葡萄酒和白葡萄酒的卡片排成一行，在它們下方，另外兩個。我創建了兩個 DIV 父目錄，每個目錄都有兩個孩子。
將“比較”（購買）按鈕放在每張圖片下方。

非常感謝您提前。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vinería Baco</title>
    <!--link css-->
    <link rel="stylesheet" href="./estilos.css">
</head>
  <body>
    <!--seccion hero/banner-->
    <header>
        <p><h1 class="h1_rojo">Vinería Baco</h1></p>
        <p><h2 class="h2_turquesa">El mejor vino de todo Berisso</h2></p>
    <!--Menu de navegacion-->
      <nav>
        <ul>
          <li class="menu menu__item"><a href="./contacto.html">Contactanos</a></li>
          <li class="menu menu__item"><a href="https://www.facebook.com/martin.prozapas">Facebook</a></li>
          <li class="menu menu__item"><a href="https://www.instagram.com/elonofficiall/?hl=es">Instagram</a></li>
          <li class="menu menu__item"><a href="./nosotros.html">Acerca de nosotros</a></li>
        </ul>
      </nav>
    </header>
      <!--Seccion main-->
      <main>
        <!--cards 1 to 2-->
        <div class="card1">
          <a href="./vino-tinto.html"><img alt="vino tinto" src="../img/tintos/tintos.jpg"width=150" height="70"></a><button type="button">Comprar</button><br>
          <a href="./vino-blanco.html"><img alt="vino blanco" src="../img/blancos/blancos.jpg"width=150" height="70"></a><button type="button">Comprar</button><br>  
        <!--cards 3 to 4-->
        <div class="card2">
          <a href="./vino-rosado.html"><img alt="vino rosado" src="../img/rosados/rosados.jpg"width=150" height="70"></a><button type="button">Comprar</button><br>
          <a href="./vino-especial.html"><img alt="vinos especiales" src="../img/especiales/especiales.jpg"width=150" height="70"></a><button type="button">Comprar</button><br></div>
      </main><br><br>
      <!--Seccion footer-->
      <footer>
        <h4>2021 | Hecho por MGP | 2021</h4>
      </footer>
  </body>
</html>

CSS：

/*HERO SECTION*/
/*Encabezados*/
.h1_turquesa {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#00868b;
  text-align: center;
}
.h1_rojo {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#8b0000;
  text-align: center;
}
.h1_azul {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(138, 43, 226);
  text-align: center;
}
.h1_verde {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: rgb(0, 128, 0);
  text-align: center;
}
h2 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(139, 0, 139);
  text-align: center;
}
/*Párrafos*/
.parr {
    display: block;
    font-size: 18px;
    color: black;
    text-align: justify;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
/*Fondo*/
body {
  background-color: rgb(197, 189, 170);
}
/*Imágenes*/
img {
    display: block;
    max-width:500px;
    max-height:500px;
    width: auto;
    height: auto;
}
/*MENU*/
.menu {
  background-color: rgb(175, 76, 122); 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: monospace;
  font-size: 16px;
}
.menu__item a {
  text-decoration: none;
  color: white;
} 
/*MAIN*/
/*Card section*/
.card1{
  display: flex;
  background-color: rgb(197, 189, 170);
  width: 90%;
  margin: 10px;
  margin: 10px;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
.card2{
  display: flex;
  background-color: rgb(197, 189, 170);
  width: 90%;
  margin: 10px;
  margin: 10px;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
/*FOOTER*/
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}

uj5u.com熱心網友回復：

有一種心態總是可以幫助我解決問題。

如果您在定位某些內容時遇到問題，請創建一個 div 父級。

我根據需要創建盡可能多的 div 父母。

例如：

<div>
   <div>My element 1</div>
   <div>My element 2</div>
   <div>My element 3</div>
   <div>My element 4</div>
</div>

有時我可能希望前兩個元素的位置不同，所以我創建了另一個父元素，它將以不同的方式包裝我想要定位的元素。

<div>
   <div>
      <div>My element 1</div>
      <div>My element 2</div>
   </div>
   <div>
      <div>My element 3</div>
      <div>My element 4</div>
   </div>
</div>

如果你這樣做，它會解決很多問題

uj5u.com熱心網友回復：

歡迎使用堆疊溢位。我建議通過美化器運行您的代碼以清理所有內容，您可以查看是否不小心忘記關閉標簽。在您的實體中，您忘記關閉我為您關閉的 div 標簽之一。我還嵌套您的兩個div的card1和card2成card-container。我繼續并彎曲那個 div 并將其對齊到中心。我還添加了一個.flex類來將您的無序串列對齊到中心。請參閱下面的這些更改。我不確定你對問題的第 2 部分的意思，如果你可以請進一步說明。

/*HERO SECTION*/
/*Encabezados*/
.h1_turquesa {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#00868b;
  text-align: center;
}
.h1_rojo {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#8b0000;
  text-align: center;
}
.h1_azul {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(138, 43, 226);
  text-align: center;
}
.h1_verde {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: rgb(0, 128, 0);
  text-align: center;
}
h2 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(139, 0, 139);
  text-align: center;
}
/*Párrafos*/
.parr {
    display: block;
    font-size: 18px;
    color: black;
    text-align: justify;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
/*Fondo*/
body {
  background-color: rgb(197, 189, 170);
}
/*Imágenes*/
img {
    display: block;
    max-width:500px;
    max-height:500px;
    width: auto;
    height: auto;
}
/*MENU*/
.menu {
  background-color: rgb(175, 76, 122); 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: monospace;
  font-size: 16px;
}
.menu__item a {
  text-decoration: none;
  color: white;
} 
/*MAIN*/
/*Card section*/
.card1{
  display: flex;
  flex-direction: column;
  background-color: rgb(197, 189, 170);
  width: 90%;
  margin: 10px;
  margin: 10px;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
.card2{
  display: flex;
  flex-direction: column;
  background-color: rgb(197, 189, 170);
  width: 90%;
  margin: 10px;
  margin: 10px;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
/*FOOTER*/
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}

.flex {
  display: flex;
  justify-content: center;
}

.card-container {
  display: flex;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vinería Baco</title>
    <!--link css-->
    <link rel="stylesheet" href="./estilos.css">
</head>
  <body>
    <!--seccion hero/banner-->
    <header>
        <p><h1 class="h1_rojo">Vinería Baco</h1></p>
        <p><h2 class="h2_turquesa">El mejor vino de todo Berisso</h2></p>
    <!--Menu de navegacion-->
      <nav>
        <ul class="flex">
          <li class="menu menu__item"><a href="./contacto.html">Contactanos</a></li>
          <li class="menu menu__item"><a href="https://www.facebook.com/martin.prozapas">Facebook</a></li>
          <li class="menu menu__item"><a href="https://www.instagram.com/elonofficiall/?hl=es">Instagram</a></li>
          <li class="menu menu__item"><a href="./nosotros.html">Acerca de nosotros</a></li>
        </ul>
      </nav>
    </header>
      <!--Seccion main-->
      <main>
        <!--cards 1 to 2-->
      <div class="card-container">
        <div class="card1">
          <a href="./vino-tinto.html"><img alt="vino tinto" src="https://dummyimage.com/600x350/000/fff"width=150" height="70"></a><br><button type="button">Comprar</button><br>
          <a href="./vino-blanco.html"><img alt="vino blanco" src="https://dummyimage.com/600x350/000/fff" width=150" height="70"></a><br><button type="button">Comprar</button><br>  
        </div>
        <!--cards 3 to 4-->
        <div class="card2">
          <a href="./vino-rosado.html"><img alt="vino rosado" src="https://dummyimage.com/600x350/000/fff"width=150" height="70"></a><br><button type="button">Comprar</button><br>
          <a href="./vino-especial.html"><img alt="vinos especiales" src="https://dummyimage.com/600x350/000/fff"width=150" height="70"></a><br><button type="button">Comprar</button><br>
        </div>
      </main><br><br>      
      </div>

      <!--Seccion footer-->
      <footer>
        <h4>2021 | Hecho por MGP | 2021</h4>
      </footer>
  </body>
</html>

編輯：將虛擬影像插入 HTML。按鈕似乎按預期顯示在影像下方。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364588.html

標籤：html css

上一篇：將滑鼠懸停在表格的行上并在該行下方打開一行以獲取更多詳細資訊

下一篇：html代碼標簽內注釋的CSS規則？