Visual Studio 有问题居中文本有一个ID“locations”它位于“locationbox”类

qlvxas9a  于 2023-10-23  发布在  其他
关注(0)|答案(1)|浏览(71)

我无法将<p id="locations">Locations</p>居中。
我试图复制这个网页。enter image description here

Here is the HTML code that I have:
<!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>Tea Cozy Project</title>

   
  <!--  <link rel="stylesheet" href="styles.css">     -->  

  <link rel="stylesheet" href="stylesheet.css">

</head>

<body>
    
   <!--NAVIGATION-->

        <nav class="navigation">

            <ul>
                <li>Mission</li>
                <li>Featured Tea</li>
                <li>Locations</li>
            </ul>
        </nav>
   

<!--Mission Statement BEGINS-->
        <div class="mission">
            <div class="statement">
                <h2>Our Mission</h2> 
             
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>

        </div>


 <!--TEA OF THE MONTH BEGINS-->       
    
 <div>

    <div class="teaintro">
            

            <h2>Tea of the Month</h2>
            <h4>What's Steeping at The Tea Cozy?</h4>
    </div>
        <br>
   
        

    <div class="teaofthemonth1" id="teadivs">        
        <!--TEA IMAGES SET 1-->

        <div class="image-container" id="teas">
            <img src="images/3BerryBlitz.webp" alt="Berry Blitz" width="300px" height="200px">
            <p>Fall Berry Blitz Tea</p>
        </div>

        <div class="image-container" id="teas" >
            <img src="images/8SpicedRum.jpeg" alt="Berry Blitz" width="300px" height="200px">
            <p>Spiced Rum Tea</p>
        </div>


        <div class="image-container" id="teas">
            <img src="images/4Donut.jpeg" alt="Seasonal Donuts" width="300px" height="200px">
            <p>Seasonal Donuts</p>
        </div>

    </div>    

    <div class="teaofthemonth2" id="teadivs">  
   
        <div class="image-container" id="teas">
            <img src="images/7MyrtleAve.jpeg" alt="Myrtle Ave Tea" width="300px" height="200px">
            <p>Myrtle Ave Tea</p>
        </div>


        <div class="image-container" id="teas">
            <img src="images/2BedfordBizarre.jpeg" alt="Bedford Bizarre Tea" width="300px" height="200px">
            <p>Bedford Bizarre Tea</p>
        </div>

   
    </div>  
   

</div>
    



<!--LOCATIONS BEGIN-->

    
<div class="locationbox">

    <p id="locations">Locations</p>
      
        <div class="lcnbox">
                <h3><b>Downtown</b> <br>
                    384 West 4th Street <br>
                    Suite 108 <br>
                    Portland, Maine <br>
                </h3>
        </div>
    

        <div class="lcnbox">
            <h3><b>East Bayside</b> <br>
                3433 Phisherman's Avenue <br>
                (Northwest Corner)<br>
                Portland, Maine <br>
            </h3>
        </div>


        <div class="lcnbox">
            <h3><b>Oakdale</b><br>
                515 Crescent Avenue<br>
                Second Floor<br>
                Portland, Maine <br>
            </h3>
        </div>

    </div>

</div>



    <!--CONTACT INFORMATION-->

        <div class="teacozy">
            
            <h2>The Tea Cozy</h2>
           

            <h5>[email protected]
                <br>
                917-555-8904
            </h5>
        </div>

 


<!--FOOTER-->

<footer>

    <p>copyright The Tea Cozy 2017</p>

</footer>

</body>

</html>



Here is the CSS code that I have:
/*   NAVIGSTION SECTION   */

li {
    display: inline;
    text-decoration: underline;

}



/*   MISSION SECTION   */

.mission {
    display: flex;
    background-image: url('/images/6Background.webp');
    height: 700px;
    width: 1200px;
    border-bottom: 1px solid seashell;
}

.statement {
    background-color: black;
    height: 100px;
    width: 1200px;
    margin-top: 250px;
    color: seashell;
    font-family: Helvetica;
    text-align: center;
}



/* TEA SECTION*/

.teaintro {
    text-align:  center;
}


.teaofthemonth1,
.teaofthemonth2 {
  display: flex;
  flex-direction: row; /* Arrange items in a row */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
}

.image-container {
    margin: 20px;
}


/* LOCATION SECTION*/

.locationbox {
    display: flex;
    background-image: url('images/5Locations.webp');
    background-size: contain;
   
}

.locationbox #locations {
    display: flex;
    flex-direction: row; /* Arrange items in a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
  }  



.lcnbox {
    font-family: Helvetica;
    text-align: center;
    margin: 100px 40px;
    color: seashell;
    width: 300px;
    height: 300px;
    background-color: black;
    line-height: 3.0;
}



/*TEA COZY CONTACT INFORMATION*/

.teacozy {
    margin-left: 500px;
    display: block;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* or wrap, wrap-reverse */
  }

我试过调整显示器的弹性，以内联和它不工作。我试过添加margin-left来移动文本，但当我这样做时，它会移动该特定div中的所有项目。

visual-studio

1条答案

按热度按时间
tjjdgumg

tjjdgumg1#

在你的代码中元素的位置是导致问题的原因，最简单的方法来处理它是通过使用grid布局。
1.在html中添加一个新的<div>，它将只包含lcnbox。在这里我添加了一个新的<div>与class="locationbox-inside"将包含lcnbox，以便它很容易放置一切。

<div class="locationbox">
    <p id="locations">Locations</p>
    <div class="locationbox-inside">
      <div class="lcnbox">
        <h3><b>Downtown</b> <br> 384 West 4th Street <br> Suite 108 <br> Portland, Maine <br>
        </h3>
      </div>


      <div class="lcnbox">
        <h3><b>East Bayside</b> <br> 3433 Phisherman's Avenue <br> (Northwest Corner)<br> Portland, Maine <br>
        </h3>
      </div>


      <div class="lcnbox">
        <h3><b>Oakdale</b><br> 515 Crescent Avenue<br> Second Floor<br> Portland, Maine <br>
        </h3>
      </div>

    </div>
  </div>

2.在CSS中，我改变了这些：

/* LOCATION SECTION*/

.locationbox {
  display: grid;
  background-image: url('images/5Locations.webp');
  background-size: contain;
  place-items: center;
}

.locationbox-inside {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: auto auto auto;
}

.locationbox #locations {
  margin: 15px 0px;
}

.lcnbox {
  font-family: Helvetica;
  text-align: center;
  color: seashell;
  width: 300px;
  aspect-ratio: 1/1;
  height: 300px;
  background-color: black;
  line-height: 3.0;
}

我在这里作了很多改动：

  • 添加aspect-ratio property：这将保持纵横比。
  • 删除.lcnbox中的边距
  • 从.locationbox #locations中删除了与flex相关的所有内容，仅添加了margin: 15px 0px;。
  • 添加样式到.locationbox-inside：添加网格布局和定位它也添加grid-gap:40px作为需要在您提供的图像.
  • 增加了grid布局到.locationbox来完美地定位所有内容。（通过删除flex）还增加了place-items:center（一个grid属性）来将所有内容放在中心。
  • 如图所示，如果你想让.locationbox占据整个高度，你可以尝试设置它的height:100vh;或使用任何其他方法。
/*   NAVIGSTION SECTION   */

li {
  display: inline;
  text-decoration: underline;
}

/*   MISSION SECTION   */

.mission {
  display: flex;
  background-image: url('/images/6Background.webp');
  height: 700px;
  width: 1200px;
  border-bottom: 1px solid seashell;
}

.statement {
  background-color: black;
  height: 100px;
  width: 1200px;
  margin-top: 250px;
  color: seashell;
  font-family: Helvetica;
  text-align: center;
}

/* TEA SECTION*/

.teaintro {
  text-align: center;
}

.teaofthemonth1,
.teaofthemonth2 {
  display: flex;
  flex-direction: row;
  /* Arrange items in a row */
  justify-content: center;
  /* Center items horizontally */
  align-items: center;
  /* Center items vertically */
}

.image-container {
  margin: 20px;
}

/* LOCATION SECTION*/

.locationbox {
  display: grid;
  background-image: url('images/5Locations.webp');
  background-size: contain;
  place-items: center;
}

.locationbox-inside {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: auto auto auto;
}

.locationbox #locations {
  margin: 15px 0px;
}

.lcnbox {
  font-family: Helvetica;
  text-align: center;
  color: seashell;
  width: 300px;
  aspect-ratio: 1/1;
  height: 300px;
  background-color: black;
  line-height: 3.0;
}

/*TEA COZY CONTACT INFORMATION*/

.teacozy {
  margin-left: 500px;
  display: block;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  /* or wrap, wrap-reverse */
}
<!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>Tea Cozy Project</title>

  <!--  <link rel="stylesheet" href="styles.css">     -->

  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>

  <!--NAVIGATION-->

  <nav class="navigation">

    <ul>
      <li>Mission</li>
      <li>Featured Tea</li>
      <li>Locations</li>
    </ul>
  </nav>


  <!--Mission Statement BEGINS-->
  <div class="mission">
    <div class="statement">
      <h2>Our Mission</h2>

      <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>

  </div>


  <!--TEA OF THE MONTH BEGINS-->

  <div>

    <div class="teaintro">

      <h2>Tea of the Month</h2>
      <h4>What's Steeping at The Tea Cozy?</h4>
    </div>
    <br>


    <div class="teaofthemonth1" id="teadivs">
      <!--TEA IMAGES SET 1-->

      <div class="image-container" id="teas">
        <img src="images/3BerryBlitz.webp" alt="Berry Blitz" width="300px" height="200px">
        <p>Fall Berry Blitz Tea</p>
      </div>

      <div class="image-container" id="teas">
        <img src="images/8SpicedRum.jpeg" alt="Berry Blitz" width="300px" height="200px">
        <p>Spiced Rum Tea</p>
      </div>


      <div class="image-container" id="teas">
        <img src="images/4Donut.jpeg" alt="Seasonal Donuts" width="300px" height="200px">
        <p>Seasonal Donuts</p>
      </div>

    </div>

    <div class="teaofthemonth2" id="teadivs">

      <div class="image-container" id="teas">
        <img src="images/7MyrtleAve.jpeg" alt="Myrtle Ave Tea" width="300px" height="200px">
        <p>Myrtle Ave Tea</p>
      </div>


      <div class="image-container" id="teas">
        <img src="images/2BedfordBizarre.jpeg" alt="Bedford Bizarre Tea" width="300px" height="200px">
        <p>Bedford Bizarre Tea</p>
      </div>

    </div>


  </div>



  <!--LOCATIONS BEGIN-->

  <div class="locationbox">
    <p id="locations">Locations</p>
    <div class="locationbox-inside">
      <div class="lcnbox">
        <h3><b>Downtown</b> <br> 384 West 4th Street <br> Suite 108 <br> Portland, Maine <br>
        </h3>
      </div>


      <div class="lcnbox">
        <h3><b>East Bayside</b> <br> 3433 Phisherman's Avenue <br> (Northwest Corner)<br> Portland, Maine <br>
        </h3>
      </div>


      <div class="lcnbox">
        <h3><b>Oakdale</b><br> 515 Crescent Avenue<br> Second Floor<br> Portland, Maine <br>
        </h3>
      </div>

    </div>
  </div>



  <!--CONTACT INFORMATION-->

  <div class="teacozy">

    <h2>The Tea Cozy</h2>

    <h5>[email protected]
      <br> 917-555-8904
    </h5>
  </div>



  <!--FOOTER-->

  <footer>

    <p>copyright The Tea Cozy 2017</p>

  </footer>

</body>

</html>
赞(0）分享  回复(0）举报  2023-10-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com