填充100％的宽度，但< p>在换行符不居中对齐 [英] Filled up 100% of the width but <p> on newline doesn't centre align

问题描述

我想在主页上制作一个带有框的网页，并且它看起来像这样

 登录
 -----或----- 
注册
  

这是代码I有

 < center> 
< p>登录< / p> 
< hr style =width：16％; float：left; margin-left：30％;/> 
< p style =float：left; margin-left：2％; margin-right：2％; width：4％;>或< / p& 
< hr style =width：16％; float：right; margin-right：30％;/> 
< p>注册< / p> 
< / center> 
  

看起来像这样 -

img src =https://i.stack.imgur.com/WtPt9.pngalt =enter image description here>

我有1个问题和1个我需要帮助的事情

问题是注册文本不是对齐的，即使它应该是，我需要帮助的事情是获得<

：//i.stack.imgur.com/Sd6DO.pngalt =对不起非常糟糕的形象>

请帮助我。

解决方案

我会这样做

 < div id =container> 
< p>登录< / p> 
< div id =或> < span>或< / span> 
< / div> 
< p>注册< / p> 
< / div> 
  

CSS

  #container {
 text-align：center; 
} 
 #or {
 height：2px; 
 background-color：black; 
 text-align：center; 
} 
 span {
 background-color：white; 
 position：relative; 
 top：-0.5em; 
 padding：0 10px; 
} 
  

I am trying to make a webpage with a box on the mainpage and it looks like this

Login
-----Or-----
Register

This is the code I have

<center>
   <p>Login</p>
    <hr style="width: 16%; float: left; margin-left:30%;"/>
     <p style="float: left; margin-left:2%; margin-right: 2%; width: 4%;">Or</p>
    <hr style="width: 16%; float: right; margin-right: 30%;"/>
   <p>Register</p>
</center>

It looks like this -

I have 1 problem and 1 thing I need help doing

The problem is the Register text is not aligned even though it should be and the thing I need help with is getting the < hr> lines to be half way down the Or text

Like this -

Please help me with this.

解决方案

I'd do it like this jsFiddle example.

HTML

<div id="container">
    <p>Login</p>
    <div id="or"> <span>Or</span>
    </div>
    <p>Register</p>
</div>

CSS

#container {
    text-align:center;
}
#or {
    height: 2px;
    background-color: black;
    text-align: center;
}
span {
    background-color: white;
    position: relative;
    top: -0.5em;
    padding:0 10px;
}

这篇关于填充100％的宽度，但&lt; p&gt;在换行符不居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！