Question

由于标题声明我已尝试搜索但我无法在其中获得带有文本的边框以居中于背景图像内部。截至目前，它只是居中，但坚持到顶部（如果这是有道理的）。

＆＃13;

.banner {
  background-image: url("http://www.hdwallpapers.in/walls/early_snowfall-wide.jpg");
  background-size: cover;
  background-position: bottom center;
  height: 400px;
  width: 100%;
}

#banner-content {
  border: 1px solid #FFF;
  margin: auto;
  text-align: center;
  width: 40%;
}

＆＃13;

  <div class="banner">
    <div id="banner-content">
      <h1>Random misc text for the purpose of practicing</h1>
    </div>
  </div>

＆＃13;

提前感谢您的帮助！

Answer 1

将display: flex;添加到banner课程;并将display: inline-flex添加到您的banner-content ID。在这里：

.banner {
  background-image: url("http://www.hdwallpapers.in/walls/early_snowfall-wide.jpg");
  background-size: cover;
  background-position: bottom center;
  height: 400px;
  width: 100%;
  display: flex;
}

#banner-content {
  border: 1px solid #FFF;
  margin: auto;
  text-align: center;
  width: 40%;
  display: inline-flex;
}

  <div class="banner">
    <div id="banner-content">
      <h1>Random misc text for the purpose of practicing</h1>
    </div>
  </div>

<强>被修改

如果您不希望屏幕较小时出现边框，请将此代码添加到您的样式中：

.banner h1{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}

无法将图像内部的边框w / txt居中

1 个答案: