css 如何保持文本居中对齐，避免位置绝对元素重叠？

bpsygsoo 于 11个月前发布在其他

关注(0)|答案(2)|浏览(211)

我正在做一个项目，我想保持页面标题中心与父div对齐，有一个后退按钮的位置是绝对的，这是创建一个重叠的问题时，页面标题太长。
有人能帮忙吗？[这是参考图片。]（https://i.stack.imgur.com/I7GvZ.png）谢谢！
我想让页面标题位于父div的中心，不管文本是长是短。它不应该与后退按钮重叠，这是绝对位置的。

css

来源：https://stackoverflow.com/questions/77695649/how-to-keep-text-center-align-and-avoid-position-absolute-element-to-overlap

2条答案

按热度按时间

cvxl0en21#

你可以尝试grid layout来居中标题

html,body{
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: aliceblue;
  gap: 8px;
}
appbar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  width: 360px;
  white-space: nowrap;
  background-color: #fff;
  color: #191919;
}
.icon{
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.back{
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.703 19.71a1.033 1.033 0 0 1-1.436 0l-6.82-6.659a1.462 1.462 0 0 1 0-2.102l6.82-6.659a1.033 1.033 0 0 1 1.436 0 .975.975 0 0 1 0 1.402L9.24 12l6.462 6.308a.975.975 0 0 1 0 1.402z' fill='%23191919'/%3E%3C/svg%3E") center/24px no-repeat;
}
.title{
  font-weight: normal;
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
}
tool{
  display: flex;
  flex: 1;
  font-size: 14px;
  align-items: center;
}
.right{
  justify-content: end;
}
.link{
  padding: 8px;
  color: rgba(0,0,0,.5);
  cursor: pointer;
}
.search{
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2841_4795)'%3E%3Cpath d='M18.25 10.125c0 1.793-.582 3.45-1.563 4.793l4.946 4.95a1.252 1.252 0 0 1-1.77 1.769l-4.945-4.95a8.078 8.078 0 0 1-4.793 1.563A8.124 8.124 0 0 1 2 10.125 8.124 8.124 0 0 1 10.125 2a8.124 8.124 0 0 1 8.125 8.125zm-8.125 5.625a5.625 5.625 0 1 0 0-11.25 5.625 5.625 0 0 0 0 11.25z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2841_4795'%3E%3Cpath fill='%23fff' transform='translate(2 2)' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") center/24px no-repeat;
}
.add{
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.539 3.538C13.539 2.688 12.85 2 12 2s-1.539.688-1.539 1.538v6.923H3.538C2.688 10.461 2 11.15 2 12s.688 1.539 1.538 1.539h6.923v6.923c0 .85.688 1.538 1.539 1.538s1.539-.688 1.539-1.538v-6.923h6.923c.85 0 1.538-.688 1.538-1.539s-.688-1.539-1.538-1.539h-6.923V3.538z' fill='%23000'/%3E%3C/svg%3E") center/24px no-repeat;
}

个字符

赞(0）回复(0）举报 11个月前

qf9go6mv2#

.mydiv{
    display: flex;
    width: 100%;
    align-items: center;
  }
  .content{
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline;
  }

  button {
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin:0 15px;
  }

个字符

赞(0）回复(0）举报 11个月前

我来回答

css 如何保持文本居中对齐，避免位置绝对元素重叠？

2条答案

相关问题

热门标签

最新问答