时间戳

首页 > 解决方案 > 这是我写的 CSS，试图使内容居中，如图所示

html - 这是我写的 CSS，试图使内容居中，如图所示

问题描述

这是HTML代码如果有更好的写法请告诉我。

现在到 CSS，我试图将内容居中并使其看起来像图片，但是每当我在 body 标记中使用 Display Flex 时，它都可以工作，但是它将整个内容居中并弄乱了文本内容的当前对齐方式，是有什么办法可以使图像与文本内容居中，然后相对于主浏览器页面将其全部居中。

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");

body {
  background-color: hsl(233, 47%, 7%);
  font-size: 15px;
}

#main-heading {
  color: white;
  font-family: "Inter", sans-serif;
}

#insights {
  color: hsl(277, 64%, 61%);
}

#para {
  color: hsla(0, 0%, 100%, 0.75);
  background-blend-mode: hard-light;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 400;
}

#stats {
  font-size: 15px;
  display: flex;
  justify-content: flex-start;
}
#companies {
  color: white;
  text-align: left;
  margin-top: 50px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: bolder;
}

#templates,
#queries {
  color: white;
  text-align: left;
  margin-left: 50px;
  margin-top: 50px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: bolder;
}

#que,
#temp,
#comp {
  color: hsla(0, 0%, 100%, 0.75);
  font-family: "Lexend Deca", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
}
#image {
  background-blend-mode: ;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}
<!DOCTYPE html>
<html>
    <head>
        <link href="firstproject.css" rel="stylesheet">
    </head>
<body>
    <h1 id="main-heading">Get <span id="insights">insights</span> that help<br>
    your business grow.  </h1>
    <p id="para">Discorver the benefits of data analytics and make<br>
    better decisions regarding revenue, customer<br>
    experience, and overall efficiency.</p>
<div id="stats">
    <div id="companies"><span>10k+</span><br><span id="comp">companies</span></div>
    <div id="templates"><span>314</span><br><span id="temp">templates</span></div>
    <div id="queries"><span>12M+</span><br><span id="que">queries</span></div>
</div>

<div id="image">
    <img id="main-image" src="image-header-desktop.jpg" alt="main_image.jpg">
</div>
</body>
</html>

这是我的样子：

在此处输入图像描述

它应该是这样的：

在此处输入图像描述

标签： htmlcss

解决方案

将您的bodyand设置html为 100% ，然后在to上height使用 flex 和 set justify-contentand 。align-itemsbodycenter

然后制作一个容器并将您的文本和图像内容放入其中，并将其flex-direction设置为row.

当您到达移动断点时，如果您想堆叠元素，您可以将flex-direction容器中的设置为：column

        @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
        @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: hsl(233, 47%, 7%);
            font-size: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            display: flex;
            flex-direction: row;
            max-width:700px;
        }

        #main-heading {
            color: white;
            font-family: "Inter", sans-serif;
        }

        #insights {
            color: hsl(277, 64%, 61%);
        }

        #para {
            color: hsla(0, 0%, 100%, 0.75);
            background-blend-mode: hard-light;
            font-family: "Lexend Deca", sans-serif;
            font-weight: 400;
        }

        #stats {
            font-size: 15px;
            display: flex;
            justify-content: flex-start;
        }

        #companies {
            color: white;
            text-align: left;
            margin-top: 50px;
            font-family: "Inter", sans-serif;
            font-size: 15px;
            font-weight: bolder;
        }

        #templates,
        #queries {
            color: white;
            text-align: left;
            margin-left: 50px;
            margin-top: 50px;
            font-family: "Inter", sans-serif;
            font-size: 15px;
            font-weight: bolder;
        }

        #que,
        #temp,
        #comp {
            color: hsla(0, 0%, 100%, 0.75);
            font-family: "Lexend Deca", sans-serif;
            text-transform: uppercase;
            font-weight: 500;
        }

        #image {
           width:400px;
           height:300px;
        }

        #image img {
            width:100%;
           height:100%;
           object-fit:cover;
        }
<!DOCTYPE html>
<html>

<head>
    <link href="firstproject.css" rel="stylesheet">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
        @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: hsl(233, 47%, 7%);
            font-size: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            display: flex;
            flex-direction: row;
            max-width:700px;
        }

        #main-heading {
            color: white;
            font-family: "Inter", sans-serif;
        }

        #insights {
            color: hsl(277, 64%, 61%);
        }

        #para {
            color: hsla(0, 0%, 100%, 0.75);
            background-blend-mode: hard-light;
            font-family: "Lexend Deca", sans-serif;
            font-weight: 400;
        }

        #stats {
            font-size: 15px;
            display: flex;
            justify-content: flex-start;
        }

        #companies {
            color: white;
            text-align: left;
            margin-top: 50px;
            font-family: "Inter", sans-serif;
            font-size: 15px;
            font-weight: bolder;
        }

        #templates,
        #queries {
            color: white;
            text-align: left;
            margin-left: 50px;
            margin-top: 50px;
            font-family: "Inter", sans-serif;
            font-size: 15px;
            font-weight: bolder;
        }

        #que,
        #temp,
        #comp {
            color: hsla(0, 0%, 100%, 0.75);
            font-family: "Lexend Deca", sans-serif;
            text-transform: uppercase;
            font-weight: 500;
        }

        #image {
           width:400px;
           height:300px;
        }

        #image img {
            width:100%;
           height:100%;
           object-fit:cover;
        }
    </style>
</head>

<body>

    <div class="container">

        <div class="text-container">
            <h1 id="main-heading">Get <span id="insights">insights</span> that help<br> your business grow. </h1>
            <p id="para">Discorver the benefits of data analytics and make<br> better decisions regarding revenue,
                customer<br> experience, and overall efficiency.</p>
            <div id="stats">
                <div id="companies"><span>10k+</span><br><span id="comp">companies</span></div>
                <div id="templates"><span>314</span><br><span id="temp">templates</span></div>
                <div id="queries"><span>12M+</span><br><span id="que">queries</span></div>
            </div>
        </div>
        <div class="image-container">
            <div id="image">
                <img id="main-image" src="https://images.unsplash.com/photo-1501059520966-c59141726d6c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YmxhY2slMjBhbmQlMjB3aGl0ZSUyMGZsb3dlcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="main_image.jpg">
            </div>
        </div>

    </div>
</body>

</html>

推荐阅读