将居中文本转换到左/右边缘而不溢出

我能够将text-align从center转换为left。有了这段代码，如果你运行它，然后将鼠标悬停在上面，你会看到顶部的代码向左移动。然而，right上的底部溢出；我如何才能弄清楚如何使到right的转换不溢出？

注意：这是我的真实应用程序的演示，它有未知/可变宽度的字符串/元素，从1到任意值来填充一行（无换行）。

.header {
  position: fixed;
  width: 70%;
  background-color: springgreen;
}
.title {
  text-align: center;
}
.menu {
  text-align: center;
}
.trans-left {
  transition: margin-right 1s;
}
.trans-right {
  transition: margin-left 1s;
}
.header:hover .trans-left {
  margin-right: 100%;
}
.header:hover .trans-right {
  margin-left: 100%;
}

<body>
  <div class='header'>
    <div class='title'>
      <span class='trans-left'>This one goes left</span>
    </div>
    <div class='menu'>
      <span class='trans-right'>This one goes right</span>
    </div>
  </div>
</body>

您正在对齐文本元素，如下所示：

margin-left: 100%;
margin-right: 100%;

这将定位每个元素–从框的起点–到左边缘和右边缘。

因此，左移动框的左边缘将与容器的左边缘对齐。

并且右移动框的左边缘将与容器的右边缘对齐。这会导致此框的其余部分溢出。

试试这个：

margin-right: 90%; /* adjust as needed */

根据修改后的问题进行编辑

这里有一个替代解决方案，无论内容宽度如何都可以工作。

.header {
  position: fixed;
  width: 70%;
  background-color: springgreen;
}
.title, .menu {
  text-align: center;
  position: relative;
  width: 100%;
  height: 50px;
}
.trans-left {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 1s;
}
.trans-right {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  transition: 1s;
}
.header:hover .trans-left {
  left: 0;
  transform: translateX(0);
  transition: 1s;
}
.header:hover .trans-right {
  right: 0;
  transform: translateX(0);
  transition: 1s;
}

<div class="header">
  <div class="title">
    <span class="trans-left">This one goes left</span>
  </div>
  <div class="menu">
    <span class="trans-right">This one goes right</span>
  </div>
</div>

更多详细信息：元素不会保持居中，尤其是在重新调整屏幕大小时

相关内容

最新更新

热门标签：