Центр объединенных div

Question

Центр объединенных div

0

EDIT: Все отсортировано сейчас. Спасибо всем, кто помог! :)

У меня возникли проблемы с центрированием элемента моего веб-сайта. Это 3 divs, смешанные вместе, чтобы сформировать шестиугольник.

Я не могу сосредоточиться.

HTML:

<li>
    <div class="centerhex">
        <a href="#">
          <div class="hexa">
            <div class="hexcontainer">
              <div class="vertical-align">
                <span class="hextext">Lorem Ipsum Dolor</span>
              </div>
            </div>
          </div>
        </a>
    </div>
</li>

CSS:

.centerhex {
left: 50%;
margin: 0 auto;
width:210px;
height:300px;
}

.hexa {
width: 100%;
min-width: 200px;
height: 0;
padding-bottom: 57.7%;
margin-top: 65px;
background-color: #4a4a4a;
/*position: absolute;*/
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
border-radius: 4%/20%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.hexa::before,
.hexa::after {
content:"";
display: block;
width: inherit;
height: inherit;
padding: inherit;
background: inherit;
z-index: 0;
position: absolute;
border-radius: inherit;
-moz-transform:rotate(60deg);  
-webkit-transform:rotate(60deg);  
-o-transform:rotate(60deg);  
-ms-transform:rotate(60deg);
}

.hexa::after {
-moz-transform:rotate(-60deg);  
-webkit-transform:rotate(-60deg);  
-o-transform:rotate(-60deg);  
-ms-transform:rotate(-60deg);
}

.hexcontainer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}


.vertical-align {
display: table;
height: 100%;
width: 100%;
}

Кроме того, мне нужна помощь, поэтому нижняя часть фигуры не обрезается. URL: http://jackmarshallphotography.co.uk/V1/donate.html

Jack 19 фев. 2014, в 01:51

Источник

0

Для проблемы "форма обрезана", можете ли вы сказать нам, какой тег вызывает эффект наведения мыши?
Yooz 19 фев. 2014, в 00:31
0

Установите для div.servicebox ширину 914 пикселей. Это ширина вашей обертки минус 35px отступ слева и справа от div.box-container Это div.box-container шестиугольник :)
misterManSam 19 фев. 2014, в 01:19

Теги:

html

css

center

2 ответа

Ещё вопросы

Для проблемы "форма обрезана", можете ли вы сказать нам, какой тег вызывает эффект наведения мыши?
Установите для div.servicebox ширину 914 пикселей. Это ширина вашей обертки минус 35px отступ слева и справа от div.box-container Это div.box-container шестиугольник :)

misterManSam · Answer 1 · 2014-02-18T22-38-00.000Z

Позвольте мне посмотреть, могу ли я помочь вам с простым примером.

Имейте скрипку - скрипку !

Редактировать! - Вот еще одна скрипка без абсолютного позиционирования... похоже, что этого можно добиться без нее - ссылка на скрипку - нет абсолютного позиционирования

Пример абсолютного позиционирования:

HTML

<div id="parentOfCentered">
    <div id="perfectlyCentered"></div>
</div>

CSS

#parentOfCentered {
    position: relative; /*  Absolutely positioned children will be positioned in relation to the parent div */
    background: #CCC;
    width: 400px;
    height: 400px;
}
#perfectlyCentered {
    width: 200px;
    height: 200px;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px; 
   /*  
       - negative top margin of half the height
       - negative left margin of half the width
   */
}

Кажется, что предложение Йоанн не работает само по себе. Тем не менее, он работает с частями «идеально центрированного» div из вашего предложения. Спасибо, парни! :)
Круто, хорошо в зависимости от того, где вы хотите, чтобы по вертикали положить отрицательное верхнее поле в том же свойстве, что и отрицательное левое поле :)
Это не то, что я имею в виду. Мне нравится, где он находится в данный момент, но я хочу расширить контейнер div вниз.
Возможно, вы могли бы добавить min-height на section.box-container . Тогда это будет держать шестиугольник внизу, когда текст простирается выше этой минимальной высоты.
Посмотрите на ссылку jsfiddle в моем редактировании, разве нельзя добиться того же без абсолютного позиционирования? Было бы проще ... сейчас немного поздно :)

Yooz · Answer 2 · 2014-02-18T21-42-00.000Z

Есть несколько вещей, которые нужно изменить в вашем css, я работал непосредственно на вашем сайте с помощью инструмента для создания хрома, пожалуйста, найдите css, чтобы центрировать "тег":

.servicebox {
position: absolute;
margin-top: -77px;
width: 100%;
}

.servicebox ul {
list-style: none;
width: 100%;
text-align: center;
}

.servicebox ul li {
margin-left: 12px;
}

.centerhex {
margin: auto;
width: 210px;
height: 300px;
}

Надеюсь, поможет.

По второму вопросу:

вам нужно отредактировать файл hexagon.css и изменить свойство margin-top найти правильное значение: -65px или больше (строка 47)

Йоанн

Я нахожусь на вашем сайте на Chrome, и тег находится по центру, какой браузер вы используете?
Это сосредоточено, потому что часть того, что предложил Сэм, используется.
Хорошо, извините, только что увидел ваш комментарий, вы хотите посмотреть на обрезанный вопрос?
Да, пожалуйста. Кроме того, шестиугольник не выглядит точно по центру. Я действительно смущен здесь. Честно говоря, я не знаю, почему то, что предложили вы и Сэм, работает вместе. Я использовал метод Сэмса прежде, однако он не работал над этим. Это проблема, когда вы используете приобретенные темы. Вы не знаете, какие методы были использованы и как они были закодированы. Я думаю, что что-то пытается переопределить то, что в настоящее время используется.
Хорошо, сначала для проблемы с обрезкой, вам нужно отредактировать файл hexagon.css и изменить свойство margin-top, чтобы найти правильное значение (строка 47).
Это просто меняет, насколько далеко он движется при наведении. Я хотел бы, чтобы контейнер, в котором находился шестиугольник, выдвигался вниз, так что весь шестиугольник присутствует. Я мог бы исправить это, добавив теги <br> под шестигранным div, но есть ли более простой способ с CSS?