如何在一个 div(nav) 中有不同的对齐方式？答案

【问题标题】：How to have different alignments in one div(nav)?如何在一个 div(nav) 中有不同的对齐方式？
【发布时间】：2015-11-24 02:22:45
【问题描述】：

在这个小提琴中：https://jsfiddle.net/vtrec4oL/

我希望#leftSide 与<nav> 的左端对齐，其余部分在中心。

但我希望我的页面尽可能与窗口大小调整兼容，因此我不喜欢使用边距/填充。

如果可能的话，我也很想在没有额外元素的情况下实现这一点。

有谁知道如何仅使用 css 做到这一点？

【问题讨论】：

小写 t，所以text-align: center;。还要在括号和选择器之间放置空格，nav a#leftSide {
sry，那些是错别字:)
哈哈！这是一个命令！先生，是的，先生！对不起！我认为这是一个答案！；）快乐的编程伙伴！如果您也对答案感到好奇，请投票给我的问题；）
我认为这个标题更好，因为它的答案也是关于如何让一些元素左对齐、右对齐、中间对齐、右对齐等的答案，我认为应该提到代码在开始 bc 时，我们首先要定义#leftSide，然后再讨论它。但感谢您的输入！我不知道怎么输入！奇怪你必须输入两次才能达到一个换行符！
您也可以使用br标签在您的问题中创建换行符。

标签： html css layout alignment text-alignment

【解决方案1】：

我希望 a#gnbii 与导航栏的左端对齐，并且其余的链接在中心。

但我希望我的页面尽可能兼容调整窗口大小所以我不喜欢使用边距/填充。

如果可能。

结合 CSS flexbox 和 positioning 属性可以满足所有要求。

首先，向您的 a#gnbii 父容器添加一个 ID：

<li class="gnb" id="align-left"> /* NEW - ID added */
<a class="gnb" id="gnbii" href="home.html">
<img id="gnbii" src="../images/instagram icon/1.png" alt="aranpuzzle.ir" height="40px">
<img id="gnbii" src="../images/instagram icon/2.png" alt="aranpuzzle.ir" height="40px">
</a>
</li>

这是 CSS：

ul {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#align-left {
    position: absolute;
    left: 2%;
}

演示：https://jsfiddle.net/6pmfc87h/3/

这是发生了什么......

ul 成为应用了display: flex 的弹性框。每个li 现在排成一排，这是 flexbox 子项（称为“flex items”）的默认行为。
justify-content: center 将子元素沿主轴居中。在这种情况下，水平。
align-items: center 沿横轴居中子元素。在这种情况下，垂直。
position: relative 为绝对定位建立最近的定位祖先。
position: absolute 将最后一个 li 移动到其最近定位的祖先的左边缘。

要了解更多关于 flexbox 的信息，请参考：A Complete Guide to Flexbox

要了解有关绝对位置的更多信息，请查看：MDN position

更新（基于 cmets；适用于较小的屏幕）

我希望它尽可能向右滑动而不是重叠...

好的，所以我们可以将white-space: nowrap 添加到ul，这样导航项始终保持在一行中。

然后声明一个媒体查询以在较小的屏幕上向右移动所有内容：

@media only screen and (max-width: 768px) { 
    ul { justify-content: flex-start; }  /* note: site is RTL */
    #align-left { position: static; }
}

更新的演示：https://jsfiddle.net/6pmfc87h/4/

...当没有更多空间可以向右滑动时，我更喜欢那样资源管理器不允许用户调整窗口的宽度更薄！

你确定这是你想要做的吗？有some JavaScript methods 设置浏览器窗口大小，但我不确定它们在所有浏览器中是否完全可靠。更重要的是，我认为这不符合最佳实践。在我看来，应该允许用户重新调整浏览器窗口的大小，无论浏览器本身允许多少。 [Learn more.]

作为网络开发人员，您最好专注于您拥有更多控制权的领域。你可以设置一个min-width 声明告诉浏览器你的元素不能变窄。或者，您可以使用媒体查询来更改内容以适应较小的屏幕。

【讨论】：

您在我准备答案时更改了 HTML 和小提琴演示。但是，此答案仍适用于您修改后的问题并涵盖您的所有要求。如果您有任何问题，请发表评论。
我很抱歉那个编辑，但我意识到其中有太多不相关的细节，所以我想保持简短和笼统:)
非常感谢您详细，解释清楚，回答！嗯，您的回答解决了我的回答的问题，应该在中间的部分不完全在中间，但是它的问题是在调整窗口宽度时对项目的干扰，并且它也不能解决垂直对齐问题，可能你没有注意到你的填充 bc，尝试添加 *{padding:0;margin:0;} 在你的css的开头，希望你会注意到:)
编辑没有问题。你的修改也很清楚。
好吧，我想我已经有了答案！我只是添加了一点填充，对齐是固定的，浮动可以随意滑动，左侧的图像不太厚，所以它们对中心文本对齐没有太大影响：）非常感谢您的时间和建议：）我从您那里学到了很多东西：）快乐的编程；）：）

【解决方案2】：

如果要对齐特定元素，只需创建一个类并将其添加到该元素。如果要对齐最后一个孩子或第一个孩子，请在 CSS 中使用 :first-child 或 :last-child 选择器。请记住，#leftSide 是一个 ID，do 会影响一个元素，而不是使用一个类。

【讨论】：

显示您的代码或将其粘贴到 jsfiddle 中以帮助您。
我太懒了！我宁愿耐心等待:)非常感谢！
你试过nav li#leftSide { text-align:left; }
@aran，Stack Overflow 的一个目的是创建一个可以帮助未来人们的问题和答案的存储库。发布您的代码会使您的问题对更广泛的社区更有价值（更不用说它可能会让您的问题得到更多关注和更高质量的答案）。
@Michael_B 我知道，但如果某人可以用代码回答这个问题，他们也可以不用！问题是我用我的笔记本电脑编程，而我的手机上只有互联网，我知道我必须做一个热点！：D！bc 没有人在回答！（如果我现在编辑，它会宣传这个问题还是我最好删除这个并发布一个新的？

【解决方案3】：

将以下内容添加到您的 CSS：

#leftSide{
    float:left;
}

但是，如果我是你；我会为左边的图片添加几个像素的margin-left，这样它就不会在边缘了。

不幸的是，我的解决方案有点破坏了您的垂直对齐！

【讨论】：