Question

你好，我试图集中一篇文章，其中包含一些div但由于某种原因没有任何工作我尝试了自动边距也给文章一个宽度但似乎没有任何工作人知道如何解决这个问题？在使用带有div的文章方面，我可能做错了什么？

＆＃13;

html body {
    width: 100%;
    height: 100%;
}
body {
    animation-name: background;
    animation-duration: 4s;
}

article {
    border: solid 1px red;
    display: inline-block;
    margin: auto;
}

.imgborder {
    border: solid 1px;
    text-align: center;
    background: ghostwhite;
    margin: 2% auto;
    border-radius: 5px;
}

.imgborder img {
    padding: 15px;
    border-bottom: solid 1px gray;
}
.imgborder p {

}
/*Animations*/
@keyframes background {
    from {
        background-image: url("../images/background.jpg")
    }
    to {
        background-image: url("../images/background2.jpg")
    }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/global.css">
    <title>Fotografie</title>
</head>
<body>
<nav id="navi_bar">
    <ul>
        <li id="active">
            <a href="index.html">Home</a>

        </li>
        <li>
            <a href="html/info.html">Info</a>
        </li>
        <li>
            <a href="html/apparatuur.html">Apparatuur</a>
        </li>
        <li>
            <a href="html/contact.html">Contact</a>
        </li>
        <li>
            <a href="html/apparatuur.html">Categorieën</a>
            <!--<ul>
                <li><a href="html/.">Portretten</a></li>
                <li><a href="html/.">Landschappen</a></li>
                <li><a href="html/.">Dieren</a></li>
            </ul>-->
        </li>
    </ul>
</nav>

<article>
    <div class="imgborder">
        <img src="images/portretten/img1thumb.jpg" alt="meisje met sproeten zwart wit">
        <p>portretten</p>
    </div>
    <div class="imgborder">
        <img src="images/landschap/img1thumb.jpg" alt="landschap boom zwart wit">
        <p>landschappen</p>
    </div>
    <div class="imgborder">
        <img src="images/dieren/img1thumb.jpg" alt="kat liggend zwart wit">
        <p>dieren</p>

    </div>
</article>

</body>
</html>

＆＃13;

Answer 1

这是因为您使用的是display:inline-block。请在文章中将其替换为display:block。我已width:50%;使其看起来更好。

＆＃13;

html body {
  width: 100%;
  height: 100%;
}

body {
  animation-name: background;
  animation-duration: 4s;
}

article {
  width: 50%;
  border: solid 1px red;
  display: block;
  margin: auto;
}

.imgborder {
  border: solid 1px;
  text-align: center;
  background: ghostwhite;
  margin: 2% auto;
  border-radius: 5px;
}

.imgborder img {
  padding: 15px;
  border-bottom: solid 1px gray;
}

.imgborder p {}


/*Animations*/

@keyframes background {
  from {
    background-image: url("../images/background.jpg")
  }
  to {
    background-image: url("../images/background2.jpg")
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/global.css">
  <title>Fotografie</title>
</head>

<body>
  <nav id="navi_bar">
    <ul>
      <li id="active">
        <a href="index.html">Home</a>

      </li>
      <li>
        <a href="html/info.html">Info</a>
      </li>
      <li>
        <a href="html/apparatuur.html">Apparatuur</a>
      </li>
      <li>
        <a href="html/contact.html">Contact</a>
      </li>
      <li>
        <a href="html/apparatuur.html">Categorieën</a>
        <!--<ul>
                <li><a href="html/.">Portretten</a></li>
                <li><a href="html/.">Landschappen</a></li>
                <li><a href="html/.">Dieren</a></li>
            </ul>-->
      </li>
    </ul>
  </nav>

  <article>
    <div class="imgborder">
      <img src="images/portretten/img1thumb.jpg" alt="meisje met sproeten zwart wit">
      <p>portretten</p>
    </div>
    <div class="imgborder">
      <img src="images/landschap/img1thumb.jpg" alt="landschap boom zwart wit">
      <p>landschappen</p>
    </div>
    <div class="imgborder">
      <img src="images/dieren/img1thumb.jpg" alt="kat liggend zwart wit">
      <p>dieren</p>

    </div>
  </article>

</body>

</html>

＆＃13;

Answer 2

您可以将文章标记放在主标记内，并赋予其100％宽度和居中对齐

html body {
    width: 100%;
    height: 100%;
}
body {
    animation-name: background;
    animation-duration: 4s;
}

main{
    width:100%;
    text-align:center;
    
}

article {
    border: solid 1px red;
    display: inline-block;
    margin: auto;
}

.imgborder {
    border: solid 1px;
    text-align: center;
    background: ghostwhite;
    margin: 2% auto;
    border-radius: 5px;
}

.imgborder img {
    padding: 15px;
    border-bottom: solid 1px gray;
}
.imgborder p {

}
/*Animations*/
@keyframes background {
    from {
        background-image: url("../images/background.jpg")
    }
    to {
        background-image: url("../images/background2.jpg")
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/global.css">
    <title>Fotografie</title>
</head>
<body>
<nav id="navi_bar">
    <ul>
        <li id="active">
            <a href="index.html">Home</a>

        </li>
        <li>
            <a href="html/info.html">Info</a>
        </li>
        <li>
            <a href="html/apparatuur.html">Apparatuur</a>
        </li>
        <li>
            <a href="html/contact.html">Contact</a>
        </li>
        <li>
            <a href="html/apparatuur.html">Categorieën</a>
            <!--<ul>
                <li><a href="html/.">Portretten</a></li>
                <li><a href="html/.">Landschappen</a></li>
                <li><a href="html/.">Dieren</a></li>
            </ul>-->
        </li>
    </ul>
</nav>

<main>

<article>
    <div class="imgborder">
        <img src="images/portretten/img1thumb.jpg" alt="meisje met sproeten zwart wit">
        <p>portretten</p>
    </div>
    <div class="imgborder">
        <img src="images/landschap/img1thumb.jpg" alt="landschap boom zwart wit">
        <p>landschappen</p>
    </div>
    <div class="imgborder">
        <img src="images/dieren/img1thumb.jpg" alt="kat liggend zwart wit">
        <p>dieren</p>

    </div>
</article>
</main>

</body>
</html>

Answer 3

＆＃13;

html body {
    width: 100%;
    height: 100%;
}
body {
    animation-name: background;
    animation-duration: 4s;
}

article {
    border: solid 1px red;
    display: inline-block;
    margin:0 auto;
}

.imgborder {
    border: solid 1px;
    text-align: center;
    background: ghostwhite;
    margin: 2% auto;
    border-radius: 5px;
}

.imgborder img {
    padding: 15px;
    border-bottom: solid 1px gray;
}
.imgborder p {

}
/*Animations*/
@keyframes background {
    from {
        background-image: url("../images/background.jpg")
    }
    to {
        background-image: url("../images/background2.jpg")
    }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/global.css">
    <title>Fotografie</title>
</head>
<body>
<nav id="navi_bar">
    <ul>
        <li id="active">
            <a href="index.html">Home</a>

        </li>
        <li>
            <a href="html/info.html">Info</a>
        </li>
        <li>
            <a href="html/apparatuur.html">Apparatuur</a>
        </li>
        <li>
            <a href="html/contact.html">Contact</a>
        </li>
        <li>
            <a href="html/apparatuur.html">Categorieën</a>
            <!--<ul>
                <li><a href="html/.">Portretten</a></li>
                <li><a href="html/.">Landschappen</a></li>
                <li><a href="html/.">Dieren</a></li>
            </ul>-->
        </li>
    </ul>
</nav>
<div align="center">
  


<article>
    <div class="imgborder">
        <img src="images/portretten/img1thumb.jpg" alt="meisje met sproeten zwart wit">
        <p>portretten</p>
    </div>
    <div class="imgborder">
        <img src="images/landschap/img1thumb.jpg" alt="landschap boom zwart wit">
        <p>landschappen</p>
    </div>
    <div class="imgborder">
        <img src="images/dieren/img1thumb.jpg" alt="kat liggend zwart wit">
        <p>dieren</p>

    </div>
</article>
</div>
</body>
</html>

＆＃13;

Answer 4

我给了文章width:100%;，并在文章max-wdith中给出了div。

＆＃13;

html body {
    width: 100%;
    height: 100%;
}
body {
    animation-name: background;
    animation-duration: 4s;
}

article {
    width:100%;
    border: solid 1px red;
    display: inline-block;
}
article div {
  max-width:200px;
}

.imgborder {
    border: solid 1px;
    text-align: center;
    background: ghostwhite;
    margin: 2% auto;
    border-radius: 5px;
}

.imgborder img {
    padding: 15px;
    border-bottom: solid 1px gray;
}
.imgborder p {

}
/*Animations*/
@keyframes background {
    from {
        background-image: url("../images/background.jpg")
    }
    to {
        background-image: url("../images/background2.jpg")
    }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/global.css">
    <title>Fotografie</title>
</head>
<body>
<nav id="navi_bar">
    <ul>
        <li id="active">
            <a href="index.html">Home</a>

        </li>
        <li>
            <a href="html/info.html">Info</a>
        </li>
        <li>
            <a href="html/apparatuur.html">Apparatuur</a>
        </li>
        <li>
            <a href="html/contact.html">Contact</a>
        </li>
        <li>
            <a href="html/apparatuur.html">Categorieën</a>
            <!--<ul>
                <li><a href="html/.">Portretten</a></li>
                <li><a href="html/.">Landschappen</a></li>
                <li><a href="html/.">Dieren</a></li>
            </ul>-->
        </li>
    </ul>
</nav>

<article>
    <div class="imgborder">
        <img src="images/portretten/img1thumb.jpg" alt="meisje met sproeten zwart wit">
        <p>portretten</p>
    </div>
    <div class="imgborder">
        <img src="images/landschap/img1thumb.jpg" alt="landschap boom zwart wit">
        <p>landschappen</p>
    </div>
    <div class="imgborder">
        <img src="images/dieren/img1thumb.jpg" alt="kat liggend zwart wit">
        <p>dieren</p>

    </div>
</article>

</body>
</html>

＆＃13;

Answer 5

试试这个

article {
    border: solid 1px red;
    width: auto;
    margin: 0 auto;
    text-align: center;
}

.imgborder {
    display: inline-block;
    border: solid 1px;
    text-align: center;
    background: ghostwhite;
    border-radius: 5px;
}

无法使用div中心<article>

5 个答案: