Question

我正在尝试实现标记以匹配下图：

请注意，红色框位于此处，这是我的公司徽标，并且我已将部分文本空白。

第二张图片显示了我的尝试：

我的css和设计技巧不是很好，我无法正确地将面板中的文字放置在徽标下方的中心位置，并且文字上的字体看起来不如我所使用的jpg图像，而且按钮不在面板中央或宽度正确

我正在使用Bootstrap v4.1.3

我到目前为止编写的HTML如下：

body {
  background-color: black;
}
    
#centreElement {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px solid black;
    background-color: white;
    box-shadow: 1px 1px;
    max-width: 440px;
    padding-top: 20px;
}

#button-wrapper {
    float:right;
}

.centreLogo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    margin-top: -250px; /* Half the height */
    margin-left: -250px; /* Half the width */
}

.panelRow {
    margin-bottom: 20px;
}

.btn-primary {
    text-align: center;
    color: black;
    background-color: #99E5EA;
    border-color: #99E5EA;
}

<body>
 <div class="centreLogo"><img src="~/images/logo-1.png" /></div>
  <div id="centreElement">
      <div class="panelRow">
  <p>You are accessing a . The access to or use of any resources without permission is strictly prohibited. Unauthorized use may face criminal or civil penalties. You are subject to our Terms of Use and may
      be monitored or recorded.</p>
</div>
<div id="button-wrapper">
  <a class="btn btn-primary">
      Accept
  </a>
</div>
  </div>
</body>

有没有更好的方法可以将面板上的徽标下面的文本居中居中，该徽标也需要单独居中

Answer 1

有两种方法可以创建一个容器，其中包含公司徽标和面板（位于面板中心）：

具有固定宽度和左右自动边距的容器
使用 Bootstrap 网格系统（例如，行和列以及居中对齐的内容）的具有流体宽度的容器

要使卡片/面板内部的文本和按钮居中对齐，可以使用text-align:center;或 Bootstrap utility class .text-center。

固定宽度，带有左右自动边距

<body>
    <main id="site-main">
        <div class="company-logo"></div>
        <div class="card text-center">
            <div class="card-body">
                <p>...</p>
                <button />
            </div>
        </div>
    </main>
</body>

#site-main {
    width: 30rem;
    margin: 3rem auto;
}

.company-logo {
    height: 5rem;
    background: red;
    margin-bottom: 2rem;
}

演示： https://jsfiddle.net/davidliang2008/trudcsxj/12/

使用网格系统

由于现在使用 flexbox 构建了 Bootstrap 行和列，因此您可以使用justify-content:center;轻松构造单个行和列，以使容器居中。< / p>

使用这种方法，您还可以为不同的breakpoints选择所需的列宽。

<body>
    <main id="site-main" class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-sm-11 col-md-9 col-lg-7 col-xl-5">

                <div class="company-logo"></div>
                <div class="card text-center">
                    <div class="card-body">
                        <p>...</p>
                        <button />
                    </div>
                </div>

            </div>
        </div>
    </main>
</body>

.company-logo {
    height: 5rem;
    background: red;
    margin-bottom: 2rem;
}

演示： https://jsfiddle.net/davidliang2008/trudcsxj/17/

Answer 2

尝试

body {
  background-color: black;
}

.container {
  max-width: 75%;
  margin: 0 auto;
}

.logo {
  background: red;
  height: 100px;
  margin-bottom: 1em;
}

.content {
  background: white;
  padding: 1em;
  text-align: center;
}

<div class="container">
  <div class="logo">
  </div>
  <div class="content">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <button class="btn btn-primary">
    Hello
  </button>
  </div>
</div>

正确将徽标下方的文本面板居中

2 个答案:

固定宽度，带有左右自动边距

使用网格系统