span中<如何设置粗体，如何居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了span中<如何设置粗体，如何居中相关的知识，希望对你有一定的参考价值。
我想做个图片浏览时向左向右翻图的按钮，像网易首页那样
html:
<div class='arr-left'> <span><</span></div>
css:
.arr-leftfont-size:30px;font-weight:900;width:30px;height:35px;border:1px solid #ccc;
spantext-align:center;display:block;//这样会居中，但内容会掉到下面
疑问：设置font-weight为什么不能使>变为粗体？该如何设置
span中内容如何水平居中？
这是网易首页的截图，怎样能使<达到图中‘<’的粗度？设置font-weight最大也没那么粗呀
1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用p标签创建一行文字，并在p标签内添加span标签。
3、在test.html文件内，设置p标签的class属性为mycss。
4、在css标签内，通过class设置p标签的样式，设置它的背景颜色为灰色，宽度为200px，高度为50px。
5、在css标签内，再使用line-height属性设置p标签内容的行高，该行高与p标签的高度相同，便可以实现垂直方向居中对齐。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span
color:blue;
.hfont
color:#F00;
font-weight:bold;
</style>
</head>
<body>
<p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。<span class="hfont">中国梦</span></p>
</body>
</html>
加上font-size:22px; 字体类型：font-family: Arial, Helvetica, "宋体";
说明：要让span标签里的文字居中就要让span块级元素，并且，增加span的宽高。本回答被提问者采纳 参考技术C 把span转换成块级元素，在家居中就可以了，好像那个>是个符号，样式对这个不管用吧 参考技术D
font-weight: bold;
如何在 div 内垂直居中 <span>？ [复制]
【中文标题】如何在 div 内垂直居中 <span>？ [复制]【英文标题】：How to vertically center a <span> inside a div? [duplicate] 【发布时间】：2011-05-20 10:18:34 【问题描述】：代码：
<div
id="theMainDiv"
style="
border:solid 1px gray;
cursor:text;
width:400px;
padding:0px;"
>
<span
id="tag1_outer"
style="
background:#e2e6f0;
padding-right:4px;
padding-left:4px;
border:solid 1px #9daccc;
font:normal 11px arial;
color:#3c3c3c"
>as</span>
</div>
现在渲染时，span 对齐 div 的左下角。
【问题讨论】：
【参考方案1】：请参阅我在understanding vertical alignment 上的文章。在讨论结束时，有多种技术可以实现您想要的。
(超短总结：要么将子元素的行高设置为容器的高度，要么在容器上设置定位并将子元素绝对定位在top:50% 和margin-top:-YYYpx, YYY是孩子已知身高的一半。）
【讨论】：
@Blender Heh，尽管其中引用了第三个选项：display:table-cell; vertical-align:middle（以及 display:table-row 父级）。 :) 但是不，你可以肯定我会never advocate using HTML table elements for layout。
那么如果你想在没有固定高度的情况下做到这一点，没有办法做到吗？
@Kyralessa 不，如果您没有固定的内容高度，则存在一些尚未在我的页面中列出的技术。例如，请参阅：css-tricks.com/centering-in-the-unknown
@Phrogz - 您应该将css-tricks.com/centering-in-the-unknown 中的最后一个选项添加到您的答案中。太干净了，而且 ie8+！
如果YYY 未知怎么办？？【参考方案2】：
在你的父 DIV 添加
display:table;
并在您的子元素处添加
display:table-cell;
vertical-align:middle;
【讨论】：
这行得通，但是是否有一种简单的方法也可以将父元素中的子元素水平居中？由于孩子的显示不再是内联块，父母的“文本对齐：中心;” CSS 不再有效。【参考方案3】：单行跨度快速解答
使子级（在本例中为跨度）line-height 与父级 <div> 的高度相同
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>
然后您应该添加 CSS 规则
.parent height: 20px;
.child line-height: 20px; vertical-align: middle;
或者你可以使用子选择器来定位它
.parent height: 20px;
.parent > span line-height: 20px; vertical-align: middle;
我自己使用这个的背景
我遇到了类似的问题，我需要将移动菜单中的项目垂直居中。我在同一行高内制作了 div 和 span。请注意，这是针对流星项目的，因此不使用内联 css ;)
HTML
<div class="international">
<span class="intlFlag">
flag
</span>
<span class="intlCurrent">
country
</span>
<span class="intlButton">
<i class="fa fa-globe"></i>
</span>
</div>
CSS（div 中多个跨度的选项）
.international
height: 42px;
.international > span
line-height: 42px;
在这种情况下，如果我只有一个跨度，我可以将 CSS 规则直接添加到该跨度。
CSS（一个特定跨度的选项）
.intlFlag line-height: 42px;
这是我的显示方式
【讨论】：
为高质量的子 div 示例文本点赞。【参考方案4】：As in a similar question，使用带有占位符元素的display: inline-block 将块元素内的跨度垂直居中：
html, body, #container, #placeholder height: 100%;
#content, #placeholder display:inline-block; vertical-align: middle; <!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="container">
<span id="content">
Content
</span>
<span id="placeholder"></span>
</div>
</body>
</html>垂直对齐仅适用于inline elements or table cells，因此在垂直居中块元素时将其与display:inline-block 或display:table-cell 一起使用，并带有display:table 父级。
参考资料：
CSS Horizontal and Vertical Centering
【讨论】：
只要不包装#content，该解决方案就可以工作【参考方案5】：向父 div 添加一个高度，例如 50 像素。在子跨度中，添加 line-height: 50px; 现在跨度中的文本将垂直居中。这对我有用。
【讨论】：
以上是关于span中<如何设置粗体，如何居中的主要内容，如果未能解决你的问题，请参考以下文章