浮动后对齐中心项目

Posted 2023-03-29

【中文标题】浮动后对齐中心项目

【英文标题】：align center items after float

【发布时间】：2016-07-24 18:52:24

【问题描述】：

我正在构建一个带有移动优先媒体查询的网站。一旦我使用更大的设备（平板电脑），我必须浮动我的 .textcontainer 以便它与图像的右侧对齐。

浮动使我的内容在页面中间垂直对齐，但我不知道如何将图像和文本内容水平居中在页面中间。

我在我的 .textcontainer 中添加了 8% 的边距，使其看起来居中对齐，但我想知道是否有更好的方法将我的所有内容对齐在页面的中心，这样响应速度会更快？

另外，因为我使用了浮动，.mailicon 图像不再居中（垂直和水平）在我的页面底部...我需要把它带回中间。

这是我的 html：

<div class="section section4">
        <img src="icons/ML-network.gif" >
        <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:[e-mail]"><img class="mailicon" src="icons/email-icon%20color.png" ></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;
    

【问题讨论】：

您尝试实现的目标有点不清楚。你想让你的icon3和文本框在同一行，icon3在左边，文本框居中？还是在彼此下方都居中？

我希望 icon3 和 .textcontainer 彼此并排（如此浮动）并在我的 .section4 中间垂直和水平居中。比，我希望我的 .mailicon 位于 .section4 底部的中心

【参考方案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" >
  <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:[e-mail]">
    <img class="mailicon" src="icons/email-icon%20color.png" >
  </a>
</div>

【讨论】：

好的，我保留了我的 HTML 并更改了我的 CSS。我显示：inline-block .textcontainer 和我的主图像，删除了所有的浮动，并添加了这个：.section4 > * position: relative;最高：48%；变换：翻译（0，-50%）；现在一切都很好地居中在页面中间，除了 .mailicon 粘贴在段落下方，在右侧？？

【参考方案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;