Question

我想让这个div响应，并将文本保持在整个时间的中心。截至目前，它在移动设备上看起来很好，因为我添加了媒体查询，但在桌面上我的.info-p-div中的p元素进入下面的div并且看起来很糟糕。这些div在页面上是并排的。我将发布与页面此部分相关的HTML和CSS代码，以便您了解我的意思。

HTML

<div class="info">
<div class="info-img-div">
<img src="images/owner.jpg" />
<p><font color="#F5F5F5">Text here</font></p>
</div>
<div class="info-p-div">
<p><font color="#F5F5F5">Text here</font></p>
</div>
</div>
<div class="parallax-3"></div>

CSS

.info   {
    text-align: center;
    min-height: 250px;
    width: 100%;
    background-color: #000;
}

.info-img-div   {
    position: left;
    width: 35%;
    border-right-style: solid;
    border-color: #F5F5F5;
}

.info-img-div img {
    border-radius: 50%;
    height: 25%;
    width: 25%;
    min-height: 100px;
    min-width: 100px;
    margin-top: 20px;
}

.info-p-div {
    height: 25%;
    width: 50%;
    max-width: 65%;
    text-align: center;
    position: relative;
    float: right;
    font-size: 12px;
    word-wrap: break-word;
    vertical-align: middle;
}

.parallax-3 {
    background-image: url("images/background3.jpg");
    height: 400px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 600px)   {
    .info   {
        text-align: center;
        float: none;
        height: 50%;
    }
    .info-img-div   {
        float: none;
        border-right-style: none;
        position: relative;
        width: 100%;
    }
    .info-p-div {
        float: none;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
}

Answer 1

我认为您正在寻找以下解决方案。

我发布了一个工作示例。

.box {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 300px;
  background: tomato;
}

.box p {
  flex: 1 0 0;
  text-align: center;
}

@media screen and (max-width:600px) {
  .box {
    flex-direction: column;
  }
  .box p {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

<div class="box">
  <p>One</p>
  <p>Two</p>
</div>

将P元素保留在Div内

1 个答案: