个人中心
gpt4 book ai didi

javascript - 我怎样才能使这段文字居中？

转载 作者：行者123 更新时间：2023-12-04 12:21:47 25 4
gpt4 key购买 nike

The piece of text, "We do photography and videography", must be centered. I tried using the text-align command and justifying the content to the center. I'm thinking that it must have something to do with the way I have positioned the whole body of the HTML file. Help would be appreciated

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>PRODUX NA</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel = "stylesheet" type = "text/css" href = "reset.css"/>
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap" rel="stylesheet">
    </head>
    <body>
        <nav>
            <a href="index.html">
                <img class="logo" src="1 NA.png" width="50" height="50">
            </a>
            <ul>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About Me</a>
                </li>
                <li>
                    <a href="contacts.html">Contacts</a>
                </li>
                <li>
                    <a href="portfolio.html">Portfolio</a>
                </li>
            </ul>
        </nav>
        <div id="textAndButtonContainer">
          <div id="text">

          </div>
          <div class="container">
              <a href="commence.html">
                  <button id="button1">Get Started</button>
              </a>
          </div>
        </div>

        <script type = "text/javascript">
            var i = 0,text;
            text = "All your favorite memories in one film."

            function typing(){
                if(i < text.length){
                    document.getElementById("text").innerHTML += text.charAt(i);
                    i++
                    setTimeout(typing, 50);
                }
            }
            typing();
        </script>
        <h3 class="pv">We do photography and videography.</h3>
    </body>
</html>

* {
  margin: 0;
  padding: 0;
}
  
body {
    height: 100vh;
    width: 50vh;
    background-image: linear-gradient(rgba(68, 67, 67, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
    background-size: cover;
    background-position: center;
    text-align: center;
    justify-content: center;
}
  
nav {
    width: 100%;
    height: 80px;
    position: fixed;
  
}
  
.logo{
    float: left;
    padding: 0 30px;
    margin-left: 55px;
    margin-right: 30px;
    width: 50px;
    margin-top: 20px;
}

ul li {
    list-style: none;
    display: inline-block;
    line-height: 90px;
    padding: 0 31px;
}
  
ul {
    margin-left: 840px;
}
  
ul li a {
    text-decoration: none;
    font-size: 20px;
    font-family: 'Roboto Condensed', sans-serif;
    color: rgb(250, 250, 250);
}
  
ul li a:hover {
    color: rgb(102, 151, 241);
    transition-duration: 0.5s;
}
  
#text{ 
    transform: uppercase;
    color: white;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    margin: 0;
    font-size: 60px;
}

#textAndButtonContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none;
}
  
.container {
    display: flex;
    justify-content: center;
}
  
#button1 {
    background-color: rgb(30, 109, 255);
    border: 2px;
    border-radius: 15px 50px;
    color: white;
    padding: 35px;
    margin: 22px;
    text-align: center;
    font-size: 13px;
    font-family: 'Poppins', Helvetica;
}

#button1:hover {
    background-color: rgb(19, 66, 165);
    color: white;
    transition-duration: 0.4s;
}

.apptmnt {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none;
    font-family: 'Poppins', sans-serif;
    color: white; 
    font-size: 45px;
}

.apptmnt2 {
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none;
    font-family: 'Poppins', sans-serif;
    color: white;      
}

.pv {
    position: inherit;
    text-align: center;
}

I'm doing completing this as a personal project, which would have a great effect. Centering this piece of text in the most simplified way would be great and could help me apply it to any other situation.

最佳答案

起初您的 CSS 代码不在 <style>...</style> 中样式标签。
接下来，您的body { width: 50vh } CSS 代码限制 <h3>由于宽度小而对齐。删除它，然后一切都应该正常工作。

body {
    height: 100vh;
    background-image: linear-gradient(rgba(68, 67, 67, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
    background-size: cover;
    background-position: center;
    text-align: center;
    justify-content: center;
}

关于javascript - 我怎样才能使这段文字居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68581622/

25 4 0
文章推荐： java - 与 java.lang.Boolean 兼容的预期返回值
文章推荐： r - 如何将 yyyy-mm-dd 转换为 R 中的一年中的哪一天？
文章推荐： r - 在 ggplot2 中增加图例项之间的空白
文章推荐： asp.net-core - ASP.NET Core HostedService 在创建数据库之前尝试访问它
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com