Home > Web Front-end > HTML Tutorial > How to create the effect in the picture? (Block-level element float alignment)_html/css_WEB-ITnose

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

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template