主页 / 问题 / 1241287
Accepted
Zekoyka
Asked:2022-02-08 06:17:41 +0000 UTC2022-02-08 06:17:41 +0000 UTC

居中文本

  • 772

我想为文本添加背景。

在此处输入图像描述

大概是这样的计划。创建了与它相同的样式。

.uniform-bg {
background:black;
position:absolute;
-moz-outline-offset:-0.04em;
}
 
.uniform-bg span {
position:absolute;
}

但是当试图使用style="text-align: center;"- 它不想要居中的文本时。我无法弄清楚问题是什么。

这是代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>com</title>
    
</head>
<style>
        .fig {
            text-align: center; /* Выравнивание по центру */ 
        }
           .stroke {
            font: 2em Arial, sans-serif;
            text-shadow: red 0 0 4px;
        }
           .light {
            text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */
            color: #0083bd;
        }
            .dark {
            text-shadow: red 0 0 10px; /* Свечение красного цвета */
        }
        
        .text {
            background-color: #000;
            color: #FFFFFF;
            display: inline;
            white-space: pre-wrap;
            padding: 3px 7px;
            padding-left: 0px;
            box-shadow: -7px 0 0 #000;
            }
            
        .fon {
            font: bold 3em Arial, sans-serif;
            color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */
            text-shadow: #fff -1px -1px 0, 
            #333 3px 3px 0;
        }
        
        .layer {
            background: #fc3; /* Цвет фона */
            border: 0px solid black;  /* Параметры рамки */
            padding: 5px; /* Поля вокруг текста */
        }

        .uniform-bg {
        background:black;
        position:absolute;
        -moz-outline-offset:-0.04em;
        }
 
        .uniform-bg span {
        position:absolute;
        }
        
</style>

    <body>
    <body background="">
    <h1 class="stroke" style="text-align: center;"><font size="6" color="white" face="monospace">W123</h1>
    <h2><span class="uniform-bg" style="text-align: center;"><font size="6" color="white" face="monospace"><span>23e2423424324</span></span></h2>
    </body>

    
</html>
html

1 个回答

  1. Best Answer

    *, html, body {
    box-sizing: border-box;
    font-size: 0;
    margin: 0;
    padding: 0;
}
body { 
    align-items: center;
    color: white;
    display: flex; 
    height: 100vh;
    justify-content: center; 
    /* text-align: center; */
    text-transform: uppercase;
}
h1, h2{
    background: red; 
    font: bolder 5vmin/1 sans-serif;
    padding: 1vmin;
} 
h1 {
    display: inline-block;
}
    <main>
  <h1>Hello</h1>
  <h2>Everyone</h2>
<main>

    • 0

相关问题