Question 309198 in CSS Question posted in
Some basic documentation can be found here.

Css – How to keep text center align and avoid position absolute element to overlap?

I am working on a project where I wanted to keep the page title center aligned with the parent div, and there is a back button whose position is absolute, which is creating an overlap issue when the page title is too long.

Can anyone please help? [This is the reference image.] (https://phpout.com/wp-content/uploads/2023/12/I7GvZ.png) Thank you!

I want to keep the page title in the center of the parent div, regardless of how long or short the text is. It should never overlap with the back button, which is position-absolute.

Tags:

2

Answers


  1. 0

    you can try grid layout to center title

    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;
}
    <appbar>
  <tool>
    <a class="icon back"></a>
  </tool>
  <h2 class="title">我是标题</h2>
  <tool class="right">
    <a class="link">规则</a>
  </tool>
</appbar>
<appbar>
  <tool>
    <a class="icon back"></a>
  </tool>
  <h2 class="title">我是标题</h2>
  <tool class="right">
    <a class="icon search"></a>
  </tool>
</appbar>
<appbar>
  <tool>
    <a class="icon back"></a>
  </tool>
  <h2 class="title">我是标题</h2>
  <tool class="right">
    <a class="link">规则</a>
    <a class="link">更多</a>
  </tool>
</appbar>
<appbar>
  <tool>
    <a class="icon back"></a>
  </tool>
  <h2 class="title">我是标题我是标题激励我是标题我是标题激励</h2>
  <tool class="right">
    <a class="link">规则</a>
    <a class="link">更多</a>
  </tool>
</appbar>
<appbar>
  <tool>
    <a class="icon back"></a>
  </tool>
  <h2 class="title">我是标题我是标题激励我是标题我是标题激励</h2>
  <tool class="right">
    <a class="icon search"></a>
    <a class="icon add"></a>
  </tool>
</appbar>
    Login or Signup to reply.
  2. 0 
      .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;
  }
    <div class="mydiv">
    <button>Button</button>
    <div class="content"> Page Title Which is very LongPage Title Which is very LongPage Title Which is very LongPage Title Which is very LongPage </div>
     <button>Button</button>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search