卡住。尝试在标题标签中使用CSS向左，中心和右文本

发布于 2025-02-10 06:54:47 字数 629 浏览 2 评论 0原文

试图在标题标签中向左/中心/右中心这3个文本？没有运气，请参阅图片。

   <body>
        <header>
        <span>503.984.9317</span>
        <span>[email protected]</span>
        <span>portland, or</span>
        </header>   


body {
        background-color: pink;
    }
    
    header {
        background-color: green;
        width: 600px;
        height: 40px;
        margin: auto;
    }
    
    span {
        background-color: yellow;
    }

原文

Trying to left/center/right these 3 spans of text within a HEADER tag? No luck, please see picture.

   <body>
        <header>
        <span>503.984.9317</span>
        <span>[email protected]</span>
        <span>portland, or</span>
        </header>   


body {
        background-color: pink;
    }
    
    header {
        background-color: green;
        width: 600px;
        height: 40px;
        margin: auto;
    }
    
    span {
        background-color: yellow;
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淑女气质 2025-02-17 06:54:47

使用Flexbox应该非常有效地完成工作，但如果您不想使用它并仅依靠定位。

body {
  background-color: pink;
}

header {
  background-color: green;
  width: 600px;
  height: 40px;
  margin: auto;
}

span {
  background-color: yellow;
}

.info {
  position: relative;
}

.info>* {
  position: absolute;
  display: inline-block;
}

.info span:nth-child(3) {
  right: 0;
}

.info span:nth-child(2) {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.info span:nth-child(1) {
  left: 0;
}

<header>
  <div class="info">
    <span>503.984.9317</span>
    <span>[email protected]</span>
    <span>portland, or</span>
  </div>
</header>

Using flexbox should do the work quite efficiently but in case you don't want to use it and rely on positioning only.

body {
  background-color: pink;
}

header {
  background-color: green;
  width: 600px;
  height: 40px;
  margin: auto;
}

span {
  background-color: yellow;
}

.info {
  position: relative;
}

.info>* {
  position: absolute;
  display: inline-block;
}

.info span:nth-child(3) {
  right: 0;
}

.info span:nth-child(2) {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.info span:nth-child(1) {
  left: 0;
}

<header>
  <div class="info">
    <span>503.984.9317</span>
    <span>[email protected]</span>
    <span>portland, or</span>
  </div>
</header>

回复收藏 0 原文

幸福丶如此 2025-02-17 06:54:47

我建议您使用FlexBox，因为这是定位项目的最佳方法。
但是，由于您不想使用Flexbox，我找到了一种使用浮子来定位元素的替代方法。注意：不建议使用。
我只是为您展示另一种方法。

body {
background-color:pink;
}

header{
  background-color:yellow;
  padding:5px;
  text-align:center;
}

span{
  display:inline-block;
  padding:0px 20px;
}

.span1{
  float:left;
}

.span3{
  float:right;
}

<header>
        <span class="span1"><p>503.984.9317</p></span>
       <span class="span2"><p>[email protected]</p></span>
        <span class="span3"><p>portland, or</p></span>
</header>

I would suggest you to use flexbox as it is the optimum way to position items.
But as you don't want to use flexbox, I found an alternative way to position your elements using floats. NOTE: this is not recommended to use.
I am just showing an alternative way just for you.

body {
background-color:pink;
}

header{
  background-color:yellow;
  padding:5px;
  text-align:center;
}

span{
  display:inline-block;
  padding:0px 20px;
}

.span1{
  float:left;
}

.span3{
  float:right;
}

<header>
        <span class="span1"><p>503.984.9317</p></span>
       <span class="span2"><p>[email protected]</p></span>
        <span class="span3"><p>portland, or</p></span>
</header>

回复收藏 0 原文

微暖i 2025-02-17 06:54:47

将此样式添加到您的标题类中并检查输出。

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Add this style to your header class and check the output.

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

回复收藏 0 原文

横笛休吹塞上声 2025-02-17 06:54:47

CSS中这些情况的最佳盟友当然可以是Flexbox及其惊人的属性。继续前进，看看使用Flex容器（标头）及其子女（跨度）在Flexbox中使用Flex物品的方法。在

body {
    background-color: pink;
}

header {
    background-color: green;
    width: 600px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

span {
    background-color: yellow;
    width: 33.33%;
    height: 100%;
    justify-content: center; 
    display: inline-flex;
    align-items: center;
  padding: 0px 10px 0px;
}

span:first-child {
    justify-content: flex-start; 
}

span:last-child{
    justify-content: flex-end; 
}

<header>
        <span>503.984.9317</span>
        <span>[email protected]</span>
        <span>portland, or</span>
        </header>

Best ally for these cases in CSS can certainly be the flexbox and its amazing properties. Go ahead and take a look at this approach playing with the flex container (header) and its children(spans) known as flex items in FlexBox. Read more on Flexbox in this article.

body {
    background-color: pink;
}

header {
    background-color: green;
    width: 600px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

span {
    background-color: yellow;
    width: 33.33%;
    height: 100%;
    justify-content: center; 
    display: inline-flex;
    align-items: center;
  padding: 0px 10px 0px;
}

span:first-child {
    justify-content: flex-start; 
}

span:last-child{
    justify-content: flex-end; 
}

<header>
        <span>503.984.9317</span>
        <span>[email protected]</span>
        <span>portland, or</span>
        </header>

回复收藏 0 原文

~没有更多了~

关于作者

又爬满兰若

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

卡住。尝试在标题标签中使用CSS向左，中心和右文本

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

卡住。尝试在标题标签中使用CSS向左，中心和右文本

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。