Как сделать кружок по центру

@Captain96 · Регистрация: 11.02.2016

Author24 — интернет-сервис помощи студентам

Добрый вечер, помогите пожалуйста. Круг делается по центру с помощью margin: center; но его надо опустить вниз на середину. http://storage6.static.itmages... a96b21.png

HTML5

<html>
<head>
<link rel="shortcut icon" href="" type="image/png">
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 /">
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<title>Название магазина</title>
</head>
 
<body>
<div class="centerfon">
 
</div>
 
</body>
</html>

CSS

*{
margin:0;
padding:0;
}
body {
background-image: url(image/fon.jpg);
background-attachment:fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.centerfon {
display: block;
width: 400px;
height: 400px;
background: #0080FF;
position: absolute;
box-shadow: 0px 1px 55px 4px #000000;
opacity: 0.9;
border-radius: 200px;
}

@Fedor92 · 11.02.2016, 17:26

Не вопрос...

HTML5

<html>
<head>
<link rel="shortcut icon" href="" type="image/png">
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 /">
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<title>Название магазина</title>
<style>
*{
margin:0;
padding:0;
}
body {
background-image: url(image/fon.jpg);
background-attachment:fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.centerfon {
display: block;
margin:0 auto;
width: 400px;
height: 400px;
background: #0080FF;
box-shadow: 0px 1px 55px 4px #000000;
opacity: 0.9;
border-radius: 200px;
}
#bottom_block{width:100%; position:absolute; bottom:0}
</style>
</head>
<body>
<div id="bottom_block">
<div class="centerfon"></div>
</div>
</body>
</html>

Кстати, свойства margin:center - нет в природе...

Подправил код...

	11.02.2016, 17:26