<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
hr {
width: 33.33%;
height: 1px;
margin: 0;
background-color: #6495ED;
display: inline-block;  // hr是块级元素
vertical-align: middle;
}

span {
color: #000;
}
</style>
</head>

<body>
<div class="box">
<hr />
<span>文字居中显示</span>
<hr />
</div>
</body>

</html>

横线和文字一排，文字居中显示vertical-align: middle;的更多相关文章

  1. QT使用painter绘制文字时的居中显示

    在窗体上绘制文字时,在paintEvent()方法里用QPainter进行绘制. 主要获取对字符串打印在屏幕上时占用的像素大小 QPainter p(this); QFont font("宋 ...

  2. 用<center/>标签实现markdown 图片文字等内容居中显示

    markdown中,文字居中的方式是借助了html标签<center></center>的支持 示例 ![](https://img2018.cnblogs.com/blog/ ...

  3. Android 一排按钮居中显示

    将一排按钮放在LinearLayout中,设置LinearLayout的Android gravity属性为center_vertical(垂直居中)

  4. 浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  5. [Android]Android 布局中如何让图片和文字居中显示？

    图片文字居中显示 **①组件TextView的属性 drawableTop ``` <LinearLayout android:layout_width="match_parent&q ...

  6. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  7. Html、Css-----当有文字和图片的时候，需要文字和图片居中，怎么实现？不想文字换行怎么设置

    1 当有文字和图片的时候,需要文字和图片居中,怎么实现? <a href=#" target="aa" style="white-space:nowrap ...

  8. [转]div 让文字或图片居中

    本文转自:http://qsfwy.iteye.com/blog/250206 在div 中让 文字或图片居中,请参考以下代码1: - - - - - - - - - - - - - - - - - ...

  9. 微信小程序之canvas 文字断行和省略号显示

    文字的多行处理在dom元素中很好办.但是canvas中没有提供方法,只有通过截取指定字符串来达到目的. 那么下面就介绍我自己处理的办法: wxml: <canvas canvas-id='wor ...

随机推荐

  1. [二十六]JavaIO之再回首恍然(如梦? 大悟?)

    流分类回顾 本文是JavaIO告一段落的总结帖 希望对JavaIO做一个基础性的总结(不涉及NIO) 从实现的角度进行简单的介绍 下面的这两个表格,之前出现过 数据源形式 InputStream Ou ...

  2. 第53章 结束会话端点(End Session Endpoint) - Identity Server 4 中文文档(v1.0.0)

    结束会话端点可用于触发单点注销(请参阅规范). 要使用结束会话端点,客户端应用程序会将用户的浏览器重定向到结束会话URL.用户在会话期间通过浏览器登录的所有应用程序都可以参与注销. 注意 终端会话端点 ...

  3. demo_1

    我练习的demo是基于SSM+MySQL+Eclipse+Tomcat8+Maven3实现的: 创建项目 ## 创建Maven Project: Artifact Id: cn.com.demo    ...

  4. spring-boot的spring-cache中的扩展redis缓存的ttl和key名

    原文地址:spring-boot的spring-cache中的扩展redis缓存的ttl和key名 前提 spring-cache大家都用过,其中使用redis-cache大家也用过,至于如何使用怎么 ...

  5. 关于git的简单操作

    首先这篇随笔我是不太想写的,因为网上有很多教程,我也是看廖雪峰大神的git教程自学的.还是一个小学生,就当一个学习笔记了,如果你想看大神的原版,请点击这里.我们原来都是用svn的,但是越来越觉得svn ...

  6. JavaScript 代码简洁之道

    摘要: 可以说是<Clean Code>的JS代码示例了,值得参考. 原文:JavaScript 代码简洁之道 作者:缪宇 Fundebug经授权转载,版权归原作者所有. 测试代码质量的唯 ...

  7. laravel项目thinksns-plus安装出现RuntimeException Symlink from * to * failed错误

    今天xshell安装thinksns-plus的laravel项目时出现了一个错误, [RuntimeException] Symlink from "/root/www.z5w.net/t ...

  8. vue + elementUi + upLoadIamge组件 上传文件到阿里云oss

    <template> <div class="upLoadIamge"> <el-upload action="https://jsonpl ...

  9. Array的 map() 和 reduce()

    map() map() 方法返回一个新数组,新数组中的元素为原始数组中的元素依次调用参数中的函数处理后的值. map() 方法不会对空数组进行检测,也不会修改原数组. 语法: array.map(fu ...

  10. 万能pb_ds头文件—bits/extc++.h

    c++中自带了一些非常强大却鲜为人知的功能库—pd_ds库 里面含有红黑树(rb_tree),哈希表(gp_hash_table),可持久化平衡树(rope)等超强数据结构 但是有一件非常令人头痛的事 ...