让div中的select水平居中，text-align探究

< text align > select 水平 居中 div 探究 option> 编程技术
发布日期 2022-11-01 更新日期 2022-11-01 阅读次数 45 文章字数 900

常见的样式，text-align

从字面来看仅针对文本，实际是对所有的 display: inline-block 【inline】生效。

则 select 默认为 inline-block，则 text-align 对其生效。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap 101</title>
    <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div style="width:200px;border:1px solid #777;text-align:center;">
        <select>
            <option>11111</option>
            <option>22222</option>
        </select>
    </div>
</body>

</html>

由此，其他比如 button 等，text-align:center，依然可以让其水平居中。

文章作者: 朱丰华

文章链接: https://smart.52dixiaowo.com/blog/post-173.html

版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。

< text align > select 水平 居中 div 探究 option>

发表评论

相关推荐
朱丰华   |   1年前   |   checkbox

checkbox默认传值问题

389    评论    点赞
朱丰华   |   1年前   |   linux

linux保持后台进程不被关闭nohup &

254    评论    点赞
朱丰华   |   1年前   |   sql · mysql

mysql Timestamp或dateTime格式筛选

126    评论    点赞
朱丰华   |   1年前   |   请求 · 一个

ab测压命令，apache测压工具

172    评论    点赞
朱丰华   |   1年前   |   < · iframe

让iframe嵌入的视频自适应 （100%宽度）？

122    评论    点赞
朱丰华   |   1年前   |   js · 重复

js如何避免重复监听addEventListener事件？

124    评论    点赞
朱丰华   |   1年前   |   正则 · 表达

正则表达式，实现if...then...else

113    评论    点赞
朱丰华   |   1年前   |   mysql · 变量 · sql

MySQL实现行号-自定义变量

113    评论    点赞
朱丰华   |   1年前   |   变量 · mysql · sql · 用户

MySQL用户自定义变量

95    评论    点赞
朱丰华   |   1年前   |   sed · 文件

Shell 指定行处理head、tail、sed

156    评论    点赞
朱丰华   |   1年前   |   php · 字符 · 字符串

如何在 PHP 中将字符串的第一个字母转换为大写

150    评论    点赞
朱丰华   |   1年前   |   php · 字符 · 正则

php正则表达式原生字符

86    评论    点赞
朱丰华   |   1年前   |   html · <

html浏览器当前tab标签切换时触发监听

106    评论    点赞
朱丰华   |   1年前   |   javascript · 滚动 · html

Javascript 显示当前滚动条滚动的百分比

74    评论    点赞
朱丰华   |   1年前   |   html · id · <

html同一个页面有两个相同id ，如何用id选择器选中

109    评论    点赞
朱丰华   |   1年前   |   文件 · linux · 修改

linux文件的三个时间atime,mtime,ctime分别表示什么？

275    评论    点赞
朱丰华   |   1年前   |   linux · 文件

linux递归统计文件夹大小、du命令_Linux du命令：查看文件夹和文件的磁盘占用情况

193    评论    点赞
朱丰华   |   1年前   |   git · add · 文件

git add -A 和 git add . 的区别

113    评论    点赞
朱丰华   |   1年前   |   php

windows下编写、编译php扩展

158    评论    点赞
朱丰华   |   1年前   |   linux · php

linux下编写、编译php扩展

150    评论    点赞
{{item.author_name}}   |   {{new Date(item.date*1000).log()}}   |   {{it}} ·

{{item.title}}

{{item.uv}}    评论    点赞