Question

我正在建立一个移动首次媒体查询的网站。一旦我到了一个更大的设备（平板电脑），我不得不浮动我的.textcontainer，以便它在我的图像的右侧对齐。

浮动工具可以在页面中间垂直对齐我的内容，但我无法弄清楚如何在页面中间水平居中我的图像和文本内容。

我向我的.textcontainer添加了8％的保证金权限，使其看起来居中对齐，但我想知道是否有更好的方法将所有内容对齐在页面中心更敏感？

另外，因为我使用浮动，所以.mailicon图像不再位于我页面底部（垂直和水平）...我需要将它带回中间。

这是我的HTML：

<div class="section section4">
        <img src="icons/ML-network.gif" alt="icon3">
        <div class="textcontainer">
        <h1>Ethereum</h1>
        <p class="ultralight">A turing complete platform with numerous <br> pre-optimized smart contract templates. Backed by the security of Ethereum.</p>
        </div>
        <a href="mailto:contact@magicledger.com"><img class="mailicon" src="icons/email-icon%20color.png" alt="mail icon"></a>
    </div>

和我的CSS：

    main img {
        width: 30%;
    }
    .textcontainer {
    float: right;
    width: 50%;
    margin-right: 8%;  /* ADJUST BETTER... */  
    }
    main .section > * {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);  
}
    main h1 {
    text-align: left;
    font-size: 1.8em; 
    margin-top: 0;    
    }
    main p {
    text-align: left;
    margin: 0;    
    }
    .section4 .mailicon {
    clear: both;
    width: 40px !important;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    }

Answer 1

您可以将display:inline-block;用于子元素（在您的情况下为.textcontainer），该元素遵循父级中给出的text-align规则。

我也放了iPhone媒体查询，并使.textcontainer居中对齐。

img {
  width: 30%;
  float:left;
}
.clearfix{
clear:both;
}
.section{
  text-align:right;
}
.textcontainer {
  width: 50%;
  display:inline-block;
  text-align:left;
}
main.section > * {
  position: relative;
  top: 50 %;
  transform: translate(0, -50%);
}
main h1 {
  text - align: left;
  font - size: 1.8em;
  margin - top: 0;
}
main p {
  text-align: left;
  margin: 0;
}
.section4.mailicon {
  clear: both;
  width: 40px!important;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  .section{
    text-align:center;
  }
}

<div class="section section4">
  <img src="icons/ML-network.gif" alt="icon3">
  <div class="clearfix"></div>
  <div class="textcontainer">
    <h1>Ethereum</h1>
    <p class="ultralight">A turing complete platform with numerous
      <br>pre-optimized smart contract templates. Backed by the security of Ethereum.</p>
  </div>
  <div class="clearfix"></div>
  <a href="mailto:contact@magicledger.com">
    <img class="mailicon" src="icons/email-icon%20color.png" alt="mail icon">
  </a>
</div>

Answer 2

您的代码似乎无法在我的计算机上运行（垂直对齐）。

您可以使用jQ执行此操作：

 var conWidth = $(".section4").width(),imgWidth =$(".section4 > img").width(),textConWidth = $(".textcontainer").width() ;
    $(".textcontainer").css("margin-right",(conWidth - imgWidth - textConWidth) / 2);

对于垂直对齐中心，我通常这样做：

.someclass{
        display: table-cell;
        vertical-align:middle;
        width: 100px;
        height: 100px;
    }

浮动后对齐中心项目

2 个答案: