Как сделать элемент DIV ровно по центру?

Задача.

Есть написанное меню, которое подходит для целей клиента. Шаблон меню скачан со стороннего ресурса клиентом. Нужно вписать меню на главную страницу и полностью отцентровать: как по-горизонтали, так и по-вертикали.

Приступаем  к работе.

  • Для начала работы мне потребовались FTP-данные сайта: Сервер, Логин, Пароль.
  • В качестве FTP-клиента я использую Total Commander.
  • После получения доступа к сайта обязательно делаю бэкап файлов.
  • Для редактирования мне понадобятся программа “Notepad++” и браузер (в моём случае это Яндекс.Браузер).
  • В браузере на редактируемых мною страницах я использую режим редактирования кода Ctrl+Shift+I (вкладка Elements).
  • Код меню добавлен к нам на сайт и посмотреть его можно по ссылке –>

Решаем задачу.

  1. Из кода меню нам понадобится скопировать на нашу страницу  следующие строчки:

В начале страницы перед открывающимся тегом body

		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>

Между тегом body

<div class="column">
					<div id="dl-menu" class="dl-menuwrapper">
						<button class="dl-trigger">Open Menu</button>
						<ul class="dl-menu">
							<li>
								<a href="#">Fashion</a>
								<ul class="dl-submenu">
									<li>
										<a href="#">Men</a>
										<ul class="dl-submenu">
											<li><a href="#">Shirts</a></li>
											<li><a href="#">Jackets</a></li>
											<li><a href="#">Chinos &amp; Trousers</a></li>
											<li><a href="#">Jeans</a></li>
											<li><a href="#">T-Shirts</a></li>
											<li><a href="#">Underwear</a></li>
										</ul>
									</li>
									<li>
										<a href="#">Women</a>
										<ul class="dl-submenu">
											<li><a href="#">Jackets</a></li>
											<li><a href="#">Knits</a></li>
											<li><a href="#">Jeans</a></li>
											<li><a href="#">Dresses</a></li>
											<li><a href="#">Blouses</a></li>
											<li><a href="#">T-Shirts</a></li>
											<li><a href="#">Underwear</a></li>
										</ul>
									</li>
									<li>
										<a href="#">Children</a>
										<ul class="dl-submenu">
											<li><a href="#">Boys</a></li>
											<li><a href="#">Girls</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Electronics</a>
								<ul class="dl-submenu">
									<li><a href="#">Camera &amp; Photo</a></li>
									<li><a href="#">TV &amp; Home Cinema</a></li>
									<li><a href="#">Phones</a></li>
									<li><a href="#">PC &amp; Video Games</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Furniture</a>
								<ul class="dl-submenu">
									<li>
										<a href="#">Living Room</a>
										<ul class="dl-submenu">
											<li><a href="#">Sofas &amp; Loveseats</a></li>
											<li><a href="#">Coffee &amp; Accent Tables</a></li>
											<li><a href="#">Chairs &amp; Recliners</a></li>
											<li><a href="#">Bookshelves</a></li>
										</ul>
									</li>
									<li>
										<a href="#">Bedroom</a>
										<ul class="dl-submenu">
											<li>
												<a href="#">Beds</a>
												<ul class="dl-submenu">
													<li><a href="#">Upholstered Beds</a></li>
													<li><a href="#">Divans</a></li>
													<li><a href="#">Metal Beds</a></li>
													<li><a href="#">Storage Beds</a></li>
													<li><a href="#">Wooden Beds</a></li>
													<li><a href="#">Children's Beds</a></li>
												</ul>
											</li>
											<li><a href="#">Bedroom Sets</a></li>
											<li><a href="#">Chests &amp; Dressers</a></li>
										</ul>
									</li>
									<li><a href="#">Home Office</a></li>
									<li><a href="#">Dining &amp; Bar</a></li>
									<li><a href="#">Patio</a></li>
								</ul>
							</li>
							<li>
								<a href="#">Jewelry &amp; Watches</a>
								<ul class="dl-submenu">
									<li><a href="#">Fine Jewelry</a></li>
									<li><a href="#">Fashion Jewelry</a></li>
									<li><a href="#">Watches</a></li>
									<li>
										<a href="#">Wedding Jewelry</a>
										<ul class="dl-submenu">
											<li><a href="#">Engagement Rings</a></li>
											<li><a href="#">Bridal Sets</a></li>
											<li><a href="#">Women's Wedding Bands</a></li>
											<li><a href="#">Men's Wedding Bands</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div><!-- /dl-menuwrapper -->
				</div>

Перед закрывающимся тегом body

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="js/jquery.dlmenu.js"></script>
		<script>
			$(function() {
				$( '#dl-menu' ).dlmenu({
					animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
				});
			});
		</script>

2. Теперь наша задача отцентрировать элемент. Есть много способов это сделать, но не все могут сработать. Я использовал следующий код в свойствах CSS.

.column {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 320px;
}

3. Теперь когда наше меню полностью по центру добиваем код, так чтобы выглядело как на картинке. Для этого я заключу перенесённый нами кусок кода меню в div и применю к нему class”container demo-2″.

4. Осталось перенести стрелку с текстом. Для это в default.css, который мы уже редактировали добавляю строчку в добавленный нами ранее код:

    background: url(../images/clickhere.png) 90px 0 no-repeat;

На этом всё!
Это небольшая 5-минутная работа, для тех кто знает что делать. И многочасовая для тех кто не знает =) Надеюсь, что помог вам и как минимум дал одно из решений, как отцентрировать элемент div на странице.

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *