HTML Div / Центрирование

0

Эй, в первую очередь, я ужасен с HTML. Div сбивает меня с ума. Теперь, что я пытаюсь сделать, я хочу, чтобы эти две ячейки были центрированы в середине страницы с примерно 20px между ними.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
</head>

<body style="background-color:pink;">
<div id="top" align="center">
<header>
    <h1 style="color:purple">Services and Rates</h1>

    <nav>
    <hr color="purple" width="80%">
    <table style="color:purple">
    <tr>
    <td style="padding-right: 50px"><a href="mqhomepage.html">Home</a></td>
    <td style="padding-right: 50px"><a href="mqaboutme.html">About Me</a></td>
    <td style="padding-right: 50px"><a href="mqphotogallery.html">Photo Gallery</a></td>
    <td><a href="mqservicesandrates.html">Services and Rates</td>
    </tr>
    </table>
    <hr color="purple" width="80%">
    </nav>
    </div>


    <div id="embroideryrates" class="centeredlistleft" >
    <h3 style="color:purple" align="center"> Embroidery </h3>
    <ul>
    <li>Colored Towel (Non White)
    <ul>
    <li>$12</li>
    </ul>
    </li>
    <li>White Towel
    <ul>
    <li>$8</li>
    </ul>
    </li>
    </ul>
    </div>

    <div id="quiltingrates" class="centeredlistright">
    <h3 style="color:purple" align="center"> Quilting </h3>
    <ul>
    <li>Custom Made Quilt
    <ul>
    <li>$400</li>
    </ul>
    </li>
    <li>Batting
    <ul>
    <li>$75</li>
    </ul>
    </li>
    <li> Lessons
    <ul>
    <li> $50/hour</li>
    </ul>
    </li>
    </ul>
    </div>

Прямо сейчас две коробки для вышивки и квилтинга находятся слева и справа. Мне просто не кажется, что они сосредоточены. И вот мой CSS.

@charset "utf-8";
/* CSS Document */

.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;

}

.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;

}

.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}

Я почти уверен, что я ухожу отсюда и снова усложняет ситуацию, но снова тег Div никогда не имел смысла для меня, и я просто не могу понять, как это сделать.

  • 0
    Так что я наконец-то понял это, прежде чем вернуться сюда, чтобы проверить. Были две вещи, которые я ошибся или добавил. Во-первых, в CSS для .body у меня не было auto margin: 0. Во-вторых, я добавил контейнер div вокруг обоих div и сделал его тело класса. Спасибо всем, кто предложил решения.
Теги:
css-float

4 ответа

0

проверить его LINK

добавить css

#listboxes {
  width: 660px;
  margin: 0 auto;
  text-align: center;

}

.centeredlistleft {

    margin-right:10px;
}

.centeredlistright {

    margin-left:10px;
}
Поделиться
0

попробуйте этот образец......

измените свой css с помощью ниже css....

 .content {
 width: 400px;
 margin: 0 auto;
  background-color:lavender;
 }
.body{
 margin: 0;
 padding:0;
 text-align: center;
 color: purple;;
 }

для демонстрации: http://jsfiddle.net/ypwjY/

Поделиться
0

Это работает. Поместите разделение обертки для двух списков

<div id="listswrapper" >
 <div id="embroideryrates" class="centeredlistleft" >
 <div id="quiltingrates" class="centeredlistright">
</div>

Затем выполните стиль следующим образом:

#listswrapper {
  width: 640px;
  margin: 0 auto;
  text-align: center;

}

.centeredlistleft {
  width:300px;
  margin:0 auto;
  text-align:left;
  border:2px solid;
  display: inline-block;
}

.centeredlistright {
  width:300px;
  margin:0 auto;
  text-align:left;
  border:2px solid;
  display: inline-block;
}

Некоторые пункты отметили:

Решение, заданное q0re, не работает (хотя я не из тех, кто использует downvote :)) из-за float:left в разделе centeredlistleft. Скорее, оба списка (divs) должны отображаться как встроенный блок.

Решение SKV может работать (я не тестировал) из-за align = "center", но это устаревший способ стилизации.

Решение Sindhu применяет дизайн центра для всего тела. это может быть нежелательно, если вы хотите контролировать деление. Кроме того, содержимое div с шириной 400 пикселей нечеткое, поскольку ваши два подразделения объединены с 600px плюс граница и отступы.

Очень важно: возможно, вы неправильно скопировали, но, пожалуйста, убедитесь, что ваш HTML всегда хорошо сформирован. Я вижу отсутствующий тег тега. В общем, такие незначительные ошибки могут (делать) привести к отнимающим много времени ошибкам для начинающих.

счастливое развитие сети!

Поделиться
0

используйте ниже код для запрошенного результата.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
<style>
@charset "utf-8";
/* CSS Document */

.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;

}

.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;

}

.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}
.outerdiv {
    width:635px;
}
.outermost {

}
</style>
</head>

<body style="background-color:pink;">
<div id="top" align="center">
<header>
    <h1 style="color:purple">Services and Rates</h1>

    <nav>
    <hr color="purple" width="80%">
    <table style="color:purple">
    <tr>
    <td style="padding-right: 50px"><a href="mqhomepage.html">Home</a></td>
    <td style="padding-right: 50px"><a href="mqaboutme.html">About Me</a></td>
    <td style="padding-right: 50px"><a href="mqphotogallery.html">Photo Gallery</a></td>
    <td><a href="mqservicesandrates.html">Services and Rates</td>
    </tr>
    </table>
    <hr color="purple" width="80%">
    </nav>
    </div>
<div class="outermost" align="center">
    <div class="outerdiv">
    <div id="embroideryrates" class="centeredlistleft" >
    <h3 style="color:purple" align="center"> Embroidery </h3>
    <ul>
    <li>Colored Towel (Non White)
    <ul>
    <li>$12</li>
    </ul>
    </li>
    <li>White Towel
    <ul>
    <li>$8</li>
    </ul>
    </li>
    </ul>
    </div>

    <div id="quiltingrates" class="centeredlistright">
    <h3 style="color:purple" align="center"> Quilting </h3>
    <ul>
    <li>Custom Made Quilt
    <ul>
    <li>$400</li>
    </ul>
    </li>
    <li>Batting
    <ul>
    <li>$75</li>
    </ul>
    </li>
    <li> Lessons
    <ul>
    <li> $50/hour</li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
</div>
Поделиться
  • 0
    Я так не думаю, просто bcoz вы использовали margin: 0 auto; и я использую Allign: центр .. проверьте свое мнение.
  • 0
    Читайте: w3schools.com/tags/att_div_align.asp --- Атрибут <div> align not supported в HTML5. Вместо этого используйте CSS. Атрибут выравнивания <div> deprecated в HTML 4.01.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню