Html Question posted in
Some basic documentation can be found here.

How to center a text in its own border using css and html

Before
After

(Note:1.Using grid and flex
2. Don’t mind the language (Vietnamese)
3. This is my first time asking for help in Stackoverflow
4. If you have some "language" problems in the code , please contact below)

I’m having a problem with aligning text in CSS. I want the texts to be in the center of the boxes which have borders outside

HTML:

type her<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="font.css" />
    
    <title>Assignment02</title>
  </head>
  <body>
    
    <header>

      <header class="container">
        <img src="banner.jpg" class="img"
        width="1247" 
        height="504.67"
        >

          <div class="centered">
            
            <h1>Dương Đức Dũng</h1>
            <h4>Full Stack Developer</h4>
          </div>
        </header>
      
        
    </header>
    <div class="main-header">
      <h1 class="textname"></h1>


      <nav>

        <div class="box-container">
          <div class="wrapper">
            <!-- <div class="box">
            </div> -->
            <a href="#" class="thongtin">Thông tin</a>
          </div>
          <div class="wrapper">
            <!-- <div class="box">
            </div> -->
            <a href="#" class="lilich">Lý lịch</a>
          </div>
          <div class="wrapper">
            <div class="box">
            </div>
            <h6>Full Stack Developer</h6>
          </div>
          <div class="wrapper">
            <!-- <div class="box">
            </div> -->
            <a href="#" class="chungchi">Chứng chỉ</a>
          </div>
          <div class="wrapper">
            <!-- <div class="box">
            </div> -->
            <a href="#" class="">Dự Án</a>
          </div>
        </div>
      </nav>
      <!-- <div class="clear"></div> -->
    </div>


  </body>
</html>

CSS:

body{
  height: 2000px;
}
.container {
    position: relative;
    text-align: center;
    color: white;
    /* background-color: grey; */
    
  }
.img{
 
    filter: brightness(30%);
    
}
header{
    font-family:'Courier New', Courier, monospace;
}

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }



  /* Add a black background color to the top navigation */

  



h2{
  font-family: 'Courier New', Courier, monospace;
  
}

nav{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:10px;
}

.box-container {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.box::before {
  content: "Dương Đức Dũng"
  
}
.box{
  font-family: 'Courier New', Courier, monospace;
  
  
}

.wrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
}
a{
  text-decoration: none;
  font-family: 'Courier New', Courier, monospace;

}
h6{
  color: gray;
  font-family: 'Courier New', Courier, monospace;
}
.thongtin{
  border-right: 0.5px solid red;
  border-left: 0.5px solid red;
  height: 100%;
}
.duan{
  border-right: 0.5px solid red;
  border-left: 0.5px solid red;
  height: 100%;
}
.lilich{
  border-right: 0.5px solid red;
  border-left: 0.5px solid red;
  height: 100%;
}
.chungchi{
    border-right: 0.5px solid red;
  border-left: 0.5px solid red;
  height: 100%;
}

I’ve tried lots of methods, but I can’t find the solution, I’m a new learner. IDK what’s happening but when I try to stretch the border, I can’t center the text anymore. Idk how to describe this problem but I’ll give u guys 2 images to compare before and after. I’m currently stuck in the "before" picture. I want my web to become like the "after" picture. THIS IS THE NAV PART OF THE WEB. Hope you guys will help me!

Tags:

2

Answers


  1. 0

    A good, simple, and direct solution would be just using a flexbox and aligning items to center vertically, using align-items: center; in CSS.

    See this example:

    body,
ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  width: 5rem;
  height: 2rem;
  border-left: 2px solid skyblue;
  border-right: 2px solid skyblue;
}
    <ul>
  <li>Calculus</li>
</ul>
    Login or Signup to reply.
  2. 0

    Based on the image that you attached, you can get the result by using Flexbox, I have arranged your code:

    HTML:

    <body>
  <div class="main-header">
    <nav>
      <div class="box-container">
        <div class="wrapper">
          <a href="#">Thông tin</a>
        </div>
        <div class="wrapper">
          <a href="#">Lý lịch</a>
        </div>
        <div class="wrapper center">
          <h3>Dương Đức Dũng</h3>
          <h6>Full Stack Developer</h6>
        </div>
        <div class="wrapper">
          <a href="#">Chứng chỉ</a>
        </div>
        <div class="wrapper">
          <a href="#">Dự Án</a>
        </div>
      </div>
    </nav>
  </div>
</body>

    CSS:

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 2000px;
  font-family: 'Courier New', Courier, monospace;
}

.container {
  position: relative;
  text-align: center;
  color: white;

}

.img {
  filter: brightness(30%);

}

nav .box-container {
  height:100px;
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.wrapper {
  padding: 0 1rem;
}

.wrapper a {
  height: 100%;
  border-right: 0.5px solid red;
  border-left: 0.5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 2rem;
}

.center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h6 {
  color: gray;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search