Question

我试图将一个文本块放在一个主容器中包含的图像旁边。由于某些原因。我正在文本的黑色中心位于页面中间的容器之外。

＆＃13;

.wrapper {
  display: inline-block;
  width: 240px;
  height: 200px
}

.textblock {
  display: inline-block;
  max-width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
}

＆＃13;

<div class="wrapper">
  <div class="this">
    <img src="image.jpg">
  </div>

  <div class="textblock">
    <h2>title</h2>
    <p> Some paragraph here</p>
    <a href="#">link</a>
  </div>
</div>

＆＃13;

包装器应位于链接中间的中心位置而包装器的内容也集中在包装器的中间。左边是图片，右边是文字。

出于某种原因，我将文本块置于页面中间位置。不在容器里。

有什么好的动手让我离开这个？提前致谢的米歇尔

Answer 1

你应该添加：

function Foo(parameters = []) {
    parameters.forEach((e) => {
        this[e.name] = e.initial;
    });
};

const p = [{
    "name": "sensitivity",
    "initial": 50
}];

const f = new Foo(p);
console.log(f);

Answer 2

.textblock {
  display: inline-block;
  max-width: 300px;
  position: relative;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
}
.this {
  display: inline-block;
}

<div id="wrapper">
  <div class="this">
    <img src="https://i.stack.imgur.com/eUM8z.png?s=48&g=1">
  </div>

  <div class="textblock">
    <h2>title</h2>
    <p> Some paragraph here</p>
    <a href="#">link</a>
  </div>
</div>

Answer 3

以下是您要求的第二个解决方案（针对多个图像/文本;我认为您可能需要它）：

＆＃13;

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.wrapper {
  width: 1200px; /* changed */
  max-width: 100%;
  margin: 0 auto;
}

.wrapper > .box {
  display: flex;
  margin-bottom: 10px;
  background: Lavender; /* added for better presentation */
}

.wrapper > .box:last-child {
  margin-bottom: 0; /* optional; sets the margin-bottom to 0 for the last box child/element inside the parent wrapper */
}

.wrapper > .box > img {
  flex: 7.2; /* added; means 60% */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.wrapper > .box > .textblock {
  flex: 4.8; /* added; means 40%; 7.2 + 4.8 = 12; because of the 1200px wrapper width */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* vertical alignment, other values you can try: space-between; space-around; flex-start; center; flex-end; */
  align-items: center; /* horizontal alignment, before: text-align: center; */
}
/* changed to 480px */
@media screen and (max-width: 480px) {
  .wrapper > .box {
    flex-direction: column; /* to stack them one above the other, i.e. two rows */
  }
}

＆＃13;

<div class="wrapper">
  <div class="box">
    <img src="http://lorempixel.com/output/animals-q-c-720-250-9.jpg" alt="img1">
    <div class="textblock">
      <h2>Title</h2>
      <p>Some paragraph here.</p>
      <a href="#">Link</a>
    </div>
  </div>
  <div class="box">
    <img src="http://lorempixel.com/output/animals-q-c-720-250-5.jpg" alt="img1">
    <div class="textblock">
      <h2>Title</h2>
      <p>Some paragraph here.</p>
      <a href="#">Link</a>
    </div>
  </div>
  <div class="box">
    <img src="http://lorempixel.com/output/animals-q-c-720-250-1.jpg" alt="img1">
    <div class="textblock">
      <h2>Title</h2>
      <p>Some paragraph here.</p>
      <a href="#">Link</a>
    </div>
  </div>
</div>

＆＃13;

正如您所注意到的，所用图像的原始大小为720px（或1200px包装的60％），宽度为250px，就像您说的那样。在这种情况下，它需要至少720px宽，它可以更多，它不会改变任何东西（演示），但如果它更少，那么它会失去质量和比率。请注意，如果您决定全屏＆＃34;如果没有1200px的包装限制，您需要找到一个更宽的图像，最好必须至少为屏幕宽度的60％（如果您决定保持60％/ 40％的比例）。我个人更喜欢宽度定义的包装，比如1200px，如果不是1200px那么也许你可以给它1920px但是我不会超过它（如果你的＆＃34;设计屏幕/显示器＆＃34;是当然至少那么广泛）。如果你愿意，也可以使用1400px，但就像我说的那样，现在容器/包装器通常设置为1200px，尽管这个＆＃34;趋势＆＃34;可以在几年左右的时间内改变。

我添加了一些有用的评论以便更好地解释，如果您需要任何其他帮助，请告诉我。

如何将包含在母div中的div中的文本居中

3 个答案: