Как центрировать текст по его границе с помощью CSS и HTML ⇐ CSS

[Anonymous]

До


После


Примечание.

• • Использование сетки и гибкости
    < /ol>
  • 
    Не обращайте внимания на язык (вьетнамский)
    < /ol>
  • 
    Я впервые прошу помощи в Stackoverflow
• • Если у вас возникли «языковые» проблемы в коде, свяжитесь с нами ниже)< /li>

У меня проблема с выравниванием текста в 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%;
}

Код: Выделить всё

[img]https://picsum.photos/seed/picsum/200/300[/img]
    width="1247"
height="504.67"
>

Dương Đức Dũng
[h4]Full Stack Developer[/h4]









[url=#]Thông tin[/url]



[url=#]Lý lịch[/url]




Full Stack Developer



[url=#]Chứng chỉ[/url]



[url=#]Dự Án[/url]

Я пробовал много методов, но не могу найти решение, я новичок.
Я не знаю, что происходит, но когда я пытаюсь растянуть границу, я больше не могу центрировать текст.
Я не знаю, как описать эту проблему, но я дам вам, ребята, два изображения для сравнения до и после.
Сейчас я застрял на фото «до». Я хочу, чтобы моя сеть стала похожа на картинку «после».
Это часть веб-страницы с навигацией.
Надеюсь, вы мне поможете!

Подробнее здесь: https://stackoverflow.com/questions/783 ... s-and-html