How to create the effect in the picture? (Block-level element float alignment)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:11:19

Original

1273 people have browsed it

As shown in the figure: the "Coverage" section remains right-aligned in the table without affecting the centered display of the text in the table.

Tried adding a float to the coverage but that would push the words next to it, and if both are floated I don’t know how to center them. Please give me some advice

Reply to the discussion (solution)

You can use positioning, for example

<!DOCTYPE HTML><html>	<head>		<meta charset="gb2312" />		<title></title>		<style>			div {				position:relative;				border:1px solid red;				width:200px; height:40px; line-height:40px;				font-size:20px; text-align:center;			}			span {				position:absolute; right:10px; top:0;			}		</style>	</head>	<body>		<div>			123<span>span</span>		</div>	</body></html>

Copy after login

Please refer to the original poster

http://www.w3school.com.cn/css/css_positioning.asp

Thank you very much!

Related labels：

如何做出图中的效果？（块级元素浮动对齐）

source：php.cn

Why does the default style have style, but it is clearly not written_html/css_WEB-ITnose"> Previous article：Why does the default style have style, but it is clearly not written_html/css_WEB-ITnose Next article：Menu navigation_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn