如何在CSS中向上移动文本

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

我正在尝试将文本向上移动,以使其不在页面的中心。我想在分屏上将文本“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 class{
  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 class="navbar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Sign In</a>
                </li>
            </ul>
            <div class="clearer"></div>
        </div>
        
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo"/>
<div class="container-fluid">
<a class="subnav=brand" href="#">
 <a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
 <a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
 <a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
 
<div class="split left">
  <div class="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 class="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>

My text that I want to move up a little bit

1

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

enter image description here

.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 class {
  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 class="navbar">
      <ul class="nav">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Contact Us</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Sign In</a></li>
      </ul>
      <div class="clearer"></div>
    </div>
    <subnav class="subnav subnav-light bg-light"><img src="universallogo.jpg" class="logo" />
      <div class="container-fluid"><a class="subnav=brand" href="#"><a class="nav-link active" aria-current="page" href="#">Bonds</a></a><a class="nav-link active" aria-current="page" href="#">Report a Claim</a><a class="nav-link active" aria-current="page" href="#">About Us</a><a class="nav-link active" aria-current="page" href="#">Search</a></div>
    </subnav>
    <div class="split left">
      <div class="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 class="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>

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

(168)
我需要生成格式保留的信用卡代理(令牌)(generate credit card number)
上一篇
如何定义要应用到面的纹理区域(aface definition)
下一篇

相关推荐

  • css disabled属性禁用 HTML 元素

    CSS disabled属性是一个布尔值属性,用于指定元素是否处于禁用状态。当元素处于禁用状态时,它将不会接受任何用户输入,并且通常会以某种方式显示出来(例如,颜色变淡)。…

    2023-12-17 16:07:26
    0 50 46
  • css画一个圆:圆形的美丽

    使用css画一个圆,可以使用`border-radius`属性:上面的代码将会创建一个宽度和高度都是200px的圆形div。…

    2023-06-03 12:24:22
    0 31 97
  • css字间距怎么设置:标题

    示例示例CSS中字间距是指文本中每个字符之间的距离。可以使用CSS中的`letter-spacing`属性来设置字间距。代码示例:…

    2023-10-06 11:53:52
    0 89 62
  • css详细教程:CSS Tutorial

    CSS(Cascading Style Sheets)是用来控制网页的样式表。它可以让你改变文字的大小,颜色,字体,对齐方式,背景图片,布局等等。…

    2023-07-03 01:58:25
    0 38 96
  • html5和css3的新特性:Welcome to the Future of Web Design!

    示例示例HTML5新特性(新的语义元素…

    2023-05-20 12:24:46
    0 16 40
  • css 背景色 透明:Let Your True Colors Shine Through!

    示例示例CSS 背景色透明可以使用 rgba 函数来实现,其中 a 代表 alpha 通道,取值范围为 0-1,0 代表完全透明,代表完全不透明。示例代码:…

    2023-06-22 06:58:38
    0 47 29
  • html css引用:这是一个标题

    示例示例HTML CSS引用是指在HTML文件中通过标签引用CSS文件,使HTML文件能够使用CSS文件中的样式设置来控制其外观。代码示例:…

    2023-06-04 14:35:55
    0 27 42
  • css底部对齐:Welcome to Our Website

    示例示例css底部对齐指的是将多个元素的底部对齐,使用CSS实现底部对齐可以使用flex布局。代码示例:…

    2023-05-01 13:46:07
    0 40 60

发表评论

登录 后才能评论

评论列表(69条)