如何在CSS中向上移动文本-码文网

我正在尝试将文本向上移动，以使其不在页面的中心。我想在分屏上将文本“GET YOUR LICENSE ＆ amp;PERMIT BONDS FAST ＆ amp;EASY”向上移动一点。我尝试了顶部和底部 px，但这不起作用。我只是希望它向上移动一点。任何帮助将不胜感激！

body {
    margin:0;
    padding: 0;
    font-family: "Open+Sans", sans-serif;
 }
 .navbar {
    border-bottom: 2px solid #0C133C;
 }
 
 
 #nav {
     background-color: #fff; 
     color: white;
     width: 100%;
 
 }
 .nav {
   float: right;
     text-align: left;
   margin: 0;
 }
 .nav > li {                                                             
     display:Inline-block;
     padding: 20px 50px 10px 9px;                              
 }
 
.nav > li a {                                               
    text-decoration: none;
    color: #0C133C;
    font-size: 18px;
    border-bottom: 3px solid transparent;
}
.clearer {
    clear:both;
}
.subnav cl{
  margin: 0;
position:relative;
}
 .subnav > div a {                                               
     text-decoration: none;
     color: #0C133C;
     font-size: 18px;
padding: 20px 30px 10px 9px;
}
  
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem; 
}
.split {
  height: 70%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: -50;
  overflow-x: hidden;
  padding-top: 20px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.left {
  left: 0;
  background-color: #282C41;
color: white;
margin-top: .5rem;
 font-size: 15px;
}
h1 {
line-height: 1.2;
font-size: 40px;
bottom: 20px;
}
 
.right {
  right: 0;
  background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
input[type=text], select {
position: relative;
left: 140px;
  width: 50%;
  padding: 12px 20px;
  margin: 3px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.on: {
position: relative;
left: 140px;
}

<!doctype html>
<html>
<head>
    <meta cht="UTF-8">
    <title>Navbar</title>
    <link rel="stylesheet" href="styles.css"
    
</head>
<body>
<div cl="navbar">
            <ul cl="nav">
                <li cl="nav-item">
                    <a cl="nav-link active" aria-current="page" href="#">Contact Us</a>
                </li>
                <li cl="nav-item">
                    <a cl="nav-link active" aria-current="page" href="#">Sign In</a>
                </li>
            </ul>
            <div cl="clearer"></div>
        </div>
        
<subnav cl="subnav subnav-light bg-light">
<img src="universallogo.jpg" cl="logo"/>
<div cl="container-fluid">
<a cl="subnav=brand" href="#">
 <a cl="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
 <a cl="nav-link active" aria-current="page" href="#">Report a Claim</a>
 <a cl="nav-link active" aria-current="page" href="#">About Us</a>
<a cl="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
 
<div cl="split left">
  <div cl="centered">
    <h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
    <p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p>
  </div>
</div>
<div cl="split right">
<form name="form1" id="form1" action="/action_page.php">
  <select name="subject" id="subject">
    <option value="" selected="selected">Select Your State</option>
      <option value="California">California</option>
      <option value="California">Illinois</option>
      <option value="California">Michigan</option>
      <option value="California">Ohio</option>
    </select>
  <br><br>
  <select name="topic" id="topic">
    <option value="" selected="selected">Who is requring the bond</option>
  </select>
  <br><br>
  <select name="chapter" id="chapter">
    <option value="" selected="selected">What jurisdiction is requring the bond</option>
  </select>
  <br><br>
     <select name="chapter" id="chapter">
    <option value="" selected="selected">Select Your Bond</option>
  </select>
<br><br>
</form>
 <form action="/action_page.php">
  <input type="text" id="date" name="startdate" placeholder="Effective Start Date">
<br><br>
  <input type="text" id="email" name="typeemail" placeholder=" Type E-mail">
</form>
<on type="on">Click Me!</on>
</div>
</body>
</html>

您遇到此问题是因为top: 50%样式应用于centered类样式应用于<h1>元素的父容器。我已应用以下更改以避免此问题，并允许您应用手动margin-top样式。

.centered{
   position: absolute;
  
   /* I disabled the style below. */
   /* top: 50%; */
   
   /* Added the following style for spacing from above. */
   margin-top: 125px;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}

更改centered类样式中定义的margin-top值，以设置相应<h1>元素的位置。

body {
  margin: 0;
  padding: 0;
  font-family: "Open+Sans", sans-serif;
}
.navbar {
  border-bottom: 2px solid #0C133C;
}
#nav {
  background-color: #fff;
  color: white;
  width: 100%;
}
.nav {
  float: right;
  text-align: left;
  margin: 0;
}
.nav>li {
  display: Inline-block;
  padding: 20px 50px 10px 9px;
}
.nav>li a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  border-bottom: 3px solid transparent;
}
.clearer {
  clear: both;
}
.subnav cl {
  margin: 0;
  position: relative;
}
.subnav>div a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  padding: 20px 30px 10px 9px;
}
.logo {
  margin-top: 1rem;
}
.subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem;
}
.split {
  height: 70%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: -50;
  overflow-x: hidden;
  padding-top: 20px;
}
.centered{
   position: absolute;
   /* I disabled the style below. */
   /* top: 50%; */
   /* Added the following style for spacing from above. */
   margin-top: 125px;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}
.left {
  left: 0;
  background-color: #282C41;
  color: white;
  margin-top: .5rem;
  font-size: 15px;
}
h1 {
  line-height: 1.2;
  font-size: 40px;
  bottom: 20px;
}
.right {
  right: 0;
  background-color: #CDCDCD;
  margin-top: .5rem;
  font-size: 18px;
}
input[type=text],
select {
  position: relative;
  left: 140px;
  width: 50%;
  padding: 12px 20px;
  margin: 3px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.on: {
  position: relative;
  left: 140px;
}

<!doctype html>
<html>
  <head>
    <meta cht="UTF-8">
    <title>Navbar</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div cl="navbar">
      <ul cl="nav">
        <li cl="nav-item"><a cl="nav-link active" aria-current="page" href="#">Contact Us</a></li>
        <li cl="nav-item"><a cl="nav-link active" aria-current="page" href="#">Sign In</a></li>
      </ul>
      <div cl="clearer"></div>
    </div>
    <subnav cl="subnav subnav-light bg-light"><img src="universallogo.jpg" cl="logo" />
      <div cl="container-fluid"><a cl="subnav=brand" href="#"><a cl="nav-link active" aria-current="page" href="#">Bonds</a></a><a cl="nav-link active" aria-current="page" href="#">Report a Claim</a><a cl="nav-link active" aria-current="page" href="#">About Us</a><a cl="nav-link active" aria-current="page" href="#">Search</a></div>
    </subnav>
    <div cl="split left">
      <div cl="centered">
        <h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
        <p>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes. </p>
      </div>
    </div>
    <div cl="split right">
      <form name="form1" id="form1" action="/action_page.php"><select name="subject" id="subject">
          <option value="" selected="selected">Select Your State</option>
          <option value="California">California</option>
          <option value="California">Illinois</option>
          <option value="California">Michigan</option>
          <option value="California">Ohio</option>
        </select><br><br><select name="topic" id="topic">
          <option value="" selected="selected">Who is requring the bond</option>
        </select><br><br><select name="chapter" id="chapter">
          <option value="" selected="selected">What jurisdiction is requring the bond</option>
        </select><br><br><select name="chapter" id="chapter">
          <option value="" selected="selected">Select Your Bond</option>
        </select><br><br></form>
      <form action="/action_page.php"><input type="text" id="date" name="startdate" placeholder="Effective Start Date"><br><br><input type="text" id="email" name="typeemail" placeholder=" Type E-mail"></form><on type="on">Click Me!</on>
    </div>
  </body>
</html>

本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处

如何在CSS中向上移动文本

发表评论

评论列表（43条）

如何在CSS中向上移动文本

相关推荐

发表评论

评论列表（43条）