横线和文字一排，文字居中显示vertical-align: middle;

最新推荐文章于 2021-08-03 19:04:47 发布
最新推荐文章于 2021-08-03 19:04:47 发布
阅读量197 收藏
点赞数
原文链接：http://www.cnblogs.com/zousaili/p/9413840.html
版权

<!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>

转载于:https://www.cnblogs.com/zousaili/p/9413840.html

ahu2331
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现文字居中两边横线效果的示例代码
09-22
主要介绍了css实现文字居中两边横线效果的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
div中让图片和文字在同一条水平线垂直居中（代码全部有注释）
进阶的博客
09-30 3458
最直接的办法其实是使用vertical-align这个属性，但由于我是半路出家学的css，很多基础知识掌握并不扎实，所以很多时候用vertical-align这个属性就会失效。于是在任务进行的过程中，我总结了一套万能的图片、文字垂直居中方法，记录在这里（脑子不好，为了便于以后使用时理解代码，在写demo时对所有代码进行了注释） 在线演示：DIV中的图片文字垂直居中Demo 代码说明：（图片就用的codepen上随手找的图片，不知道会不会哪天突然失效） HTML代码： <div>
利用vertical-align:middle实现在整个页面居中
weixin_34163741的博客
03-21 782
如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。 就以一个404页面为例，看如何让一张图片相对于整个页面居中，如下图： 这是一个404页面，里面就只有一张图片，点击图片可以回到首页，而且这个图片是相对于整个页面居中的，无论是水平还是垂直（PS：这可算是我做404页面最为习惯的一种懒人做法了，越简单越好，要想好看的话，直接用pho...
样式调整之vertical-align
qq_43437571的博客
04-07 246
vertical-align属性设置元素的垂直对齐方式 vertical-align:text-top 把元素顶端和父元素字体的顶端对齐 vertical-align:text-bottom 把元素底端和父元素字体的底端对齐 vertica...
css控制一条线垂直居中,CSS实现垂直居中的4种思路详解
weixin_31937605的博客
08-03 851
行高line-height实现单行文本垂直居中以前一直认为单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度。.test{line-height: 50px;background-color: lightblue;}测试文字设置vertical-align:middle实现垂直居中【1】设置父元素的displa...
css实现中间文字两边横线效果
12-30
1. vertical-align属性实现效果： vertical-align 属性设置元素的垂直对齐方式。... 中间文字，两边横线 <span class=line></span> <style> .header { width:400px; height:36px; line-height:3
Android实现文字下方加横线
08-18
主要为大家详细介绍了Android实现文字下方加横线，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
机器学习介绍及在金融领域的应用.zip
05-05
机器学习
麦肯锡-xx股份组织结构设计方案gl.ppt
05-05
麦肯锡-xx股份组织结构设计方案gl.ppt
目前机器人基于ChatGPT进行开发 使用机器人可以让你轻松进行对话， 后续机器人的更新升级一个命令即可搞定
05-05
目前机器人基于ChatGPT进行开发 使用机器人可以让你轻松进行对话， 后续机器人的更新升级一个命令即可搞定， 无需再上服务器进行升级机器人.zip
基于matlab实现的Hilbert-Huang Transform的完整源码EEMD.rar
05-05
基于matlab实现的Hilbert-Huang Transform的完整源码EEMD.rar
UE4 C++项目，无人机射击小游戏.zip
05-05
无人机最强源码，无人机算法，易于部署和学习交流使用
ch_PP-OCRv4_rec.onnx
05-05
PP-OCR rec
node-v6.11.4-x86.msi
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v10.1.0-linux-arm64.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v6.12.3-x86.msi
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
请用 Express 框架实现如下功能:当单击上图中某本图书名称后，显示该图书详细信息，如下图所示: 左侧是封面图，右侧最上面是书名，有一条hr横线分割开来，下面是： 作者： 出版社： 淘书价格： 内容简介： bookInfo.html模板文件: <html lang="en"> <head> <title><%=title%></title> <link rel="stylesheet" type="text/css"href="/stylesheets/divBar.css"> <style type="text/css"> divbook/width:90%;margin:10px auto? divpictureffloat:left;text-align: center;width:20%:height:800px;position: relative;top: 20px)divinfofwidth: 80%;height:800px;padding-left: 50px;position: relative; top: 20px;)abookname/display: block:height: 30px:line-height: 30px:font-size: 20px:color: bluea.bookname:hoverftext-decoration: underline n: center; span.pricefdisplay: inline-block;height: 30px;line-height: 30px;font-size:20px;color: red;a.apfdisplay:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: bluespan.other(display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: blackspan.abstractfdisplay: block;font-size: 15px;color: black} </style> </head> <body> 补充这里的代码： </body>
05-26
假设你的图书列表页面是/books，当用户单击某本图书名称时，会跳转到该图书的详细信息页面，页面路由为/book/:id，其中:id为该图书的唯一标识符。以下是使用Express框架实现该功能的代码： ``` // 引入模块 const express = require('express'); const router = express.Router(); const fs = require('fs'); // 定义图书列表页面路由 router.get('/books', (req, res) => { // 读取图书列表数据 const booksData = JSON.parse(fs.readFileSync('./data/books.json')); // 渲染图书列表页面 res.render('books', {title: '图书列表', books: booksData}); }); // 定义图书详细信息页面路由 router.get('/book/:id', (req, res) => { // 读取该图书的详细信息 const bookId = req.params.id; const booksData = JSON.parse(fs.readFileSync('./data/books.json')); const bookInfo = booksData.find(book => book.id === bookId); // 渲染图书详细信息页面 res.render('bookInfo', {title: bookInfo.name, book: bookInfo}); }); // 导出路由模块 module.exports = router; ``` 在上述代码中，我们使用了Express框架中的Router对象来定义路由。首先，我们定义了/books路由来展示图书列表页面。在/books路由的回调函数中，我们读取了存储图书列表数据的JSON文件，并将数据传递给books模板进行渲染。 接着，我们定义了/book/:id路由来展示图书详细信息页面。在/book/:id路由的回调函数中，我们使用req.params.id获取用户单击的图书的唯一标识符，然后根据该标识符读取存储图书列表数据的JSON文件，并使用Array.prototype.find()方法找到该图书的详细信息。最后，我们将该图书的详细信息传递给bookInfo模板进行渲染。 下面是bookInfo模板的代码： ``` <html lang="en"> <head> <title><%= title %></title> <link rel="stylesheet" type="text/css" href="/stylesheets/divBar.css"> <style type="text/css"> div.book {width:90%;margin:10px auto;} div.picture {float:left;text-align: center;width:20%;height:800px;position: relative;top: 20px;} div.info {width: 80%;height:800px;padding-left: 50px;position: relative; top: 20px;} a.bookname {display: block;height: 30px;line-height: 30px;font-size: 20px;color: blue} a.bookname:hover {text-decoration: underline} span.price {display: inline-block;height: 30px;line-height: 30px;font-size:20px;color: red;} a.ap {display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: blue;} span.other {display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: black;} span.abstract {display: block;font-size: 15px;color: black;} </style> </head> <body> <div class="book"> <div class="picture"> <img src="<%= book.cover %>" alt="<%= book.name %>"> </div> <div class="info"> <a href="#" class="bookname"><%= book.name %></a> <hr> <p>作者：<span class="other"><%= book.author %></span></p> <p>出版社：<span class="other"><%= book.publisher %></span></p> <p>淘书价格：<span class="price">￥<%= book.price %></span></p> <br> <p>内容简介：</p> <p><span class="abstract"><%= book.abstract %></span></p> </div> </div> </body> </html> ``` 在bookInfo模板中，我们使用了模板引擎中的变量替换语法<%= %>来将图书的详细信息渲染到页面中。具体来说，我们将图书的封面图片、书名、作者、出版社、淘书价格和内容简介分别渲染到相应的HTML元素中。其中，图书的封面图片使用了<img>标签来显示，其他信息使用了<p>标签和<span>标签来显示。最后，我们将整个图书详细信息页面放在一个名为bookInfo的模板文件中，以便于在/book/:id路由回调函数中进行渲染。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值