如何并排对齐元素？ [复制]答案

【问题标题】：How to align to elements side by side? [duplicate]如何并排对齐元素？ [复制]
【发布时间】：2018-05-31 22:31:10
【问题描述】：

我有一个视频和一个 CSS 动画，我希望视频居中，动画在左侧。我尝试将它们浮动，但这在它们之间留下了很大的差距。 - 代码笔 - https://codepen.io/MarkHarrison/pen/xpZLLy

iframe{
    border: 10px solid transparent;
    border-image-source: url(https://i.imgur.com/91tJ1qi.png);
    border-image-slice: 10;
    width: 500px;
    height: 300px;
    display: block;
    margin: auto;
}

.box {
    position: relative;
    margin: 0px;
    display: block;
    width: 600px;
    height: 420px;
    margin-top: 15%;
}

【问题讨论】：

这是你想要的最终效果吗？ codepen.io/sol_b/pen/ppgLXE
您可以直接在您的问题中添加minimal reproducible example（以堆栈片段的形式）吗？干杯！

标签： html css

【解决方案1】：

将“位置：相对”添加到 .wrapper // 不要 2. 从 .box 中移除 % margin-top
将魔法 css 添加到 .box

位置：绝对；顶部：0；左：计算（50% - 520px）；变换：translateX(-50%);

// dont' 4. 用 em/px 调整顶部，使图像垂直适合使用 transform: translateY() 代替

【讨论】：