html css 让元素居中显示,html – CSS：如何在居中元素周围对齐元素？

我正在尝试创建一个由三部分组成的简单页面导航：

>几个以前的页码(如果有的话)

>当前页码(必须居中)

>一些即将到来的页码(如果有的话)

重要的是当前页码始终在父容器中水平居中.其他两个部分应均匀占据剩余的水平空间.

这个JSFiddle说明了我解决这个问题的两次尝试.

解决方案1：使用text-align：center.这实现了期望的结果,但仅在两侧宽度相等的情况下.如果不是,则当前页码不在中心.

HTML

CSS

.container,input {

text-align: center;

}

解决方案2：使用手动指定的宽度均匀分布水平空间.这有效地将当前页码的中心置于所有情况下,但它需要您对宽度进行硬编码.

HTML

CSS

.left {

width: 40%;

float: left;

text-align: right;

}

.right {

width: 40%;

float: right;

text-align: left;

}

.center {

width: 20%;

margin-left: 40%;

}

这些解决方案都没有真正做到我想要的.有没有办法让当前页码居中,同时允许其他元素与其自然大小对齐,而不是任意像素或百分比宽度？

html css 让元素居中显示,html – CSS：如何在居中元素周围对齐元素？相关推荐

div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中. display属性实现图片居中的两种方法: 1 ...
绝对定位多个字居中显示的css
在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定位并加一个宽度,内层div居中 .box ...
android imageview 居中显示,Android中ImageView无法居中的问题
做Android UI布局,尤其是遇到比较复杂的多重LinearLayout嵌套,常常会被一些比较小的问题困扰上半天,比如今天在使用ImageView的时候,想让其居中显示,可是无论怎样设置layou ...
DIV居中显示（垂直横向双居中）
实现原理: 这种通常应用在自定义弹框当中,把背景层设置成透明灰色,内容居中显示在最前面. 这种居中方式,把内部div设置宽高之后,再设置top.left各为50%,设置完之后,这里是按照左 ...
html文字自适应屏幕居中显示,DIV+CSS经典布局[宽度自适应][自动屏幕居中]的实现...
test --> Header 分析: 最外层的wrapper把所有内容都嵌套在里边,整体相对定位.max min已经很好的控制了最窄最宽值,但对IE没有作用.如果没有其他布局的穿插,这一层其实 ...
在html css中加粗显示,在CSS里面如何实现字体加粗
在word里面实现文字加粗是一件轻而易举的事.我们直接点击加粗按钮就可以完成.但是在css里面没有加粗按钮呀,那么如何实现字体加粗呢?下面小编向大家简单介绍一下. 1.使用font-weight属性 ...
html中div设置图片居中显示,图片在DIV中居中显示的方法
问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景) 关于该问题的解决方法如下: 方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的 ...
html弹出窗口怎么居中显示,HTML页面弹出居中可拖拽的自定义窗口层
使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显示它们.这种效果不仅能够充分利用有限的版面空间,而且能够 ...

html css 让元素居中显示,html – CSS：如何在居中元素周围对齐元素？

html css 让元素居中显示,html – CSS：如何在居中元素周围对齐元素？相关推荐

最新文章

热门文章