Центрировать элементы в изображении

Question

Центрировать элементы в изображении

0

Я попробовал решения здесь, здесь, здесь и во многих других источниках, но я не могу получить то, что хочу.

Я использую шаблон Kickstart, и я хочу иметь изображение и текст/элементы, центрированные (по горизонтали и вертикали) на нем. Это то, что у меня есть:

<div class="grid">
<div class="col_12" style="margin-top:50px;" >
        <div class="mainImage"> 
            <h2>h2 Text</h2>
            <h3>h3 Text</h3>         
        </div>
</div>

И мой CSS:

.mainImage {
       height:400px;
       width:100%;
       background-image: url(img/Customers.png);
       text-decoration:line-through;
       display: flex;
       justify-content: center; /* align horizontal */
       align-items: center; /* align vertical */
 }

я пытался

display: table-cell; вертикально-выровненный: средний;

но они не работают.

Большинство решений включают указание ширины. Но я не хочу указывать ширину, поскольку я хочу, чтобы страница была отзывчивой. Если я использую display: table, это уменьшает фоновое изображение.

Я хочу, чтобы: 1. иметь изображение в своем собственном размере 2. иметь элементы, сосредоточенные на нем

Любые предложения, которые я могу попробовать?

Спасибо.

madu 14 апр. 2014, в 18:04

Источник

1

Что не сработало в перечисленных решениях? Это очень распространенный вопрос / решение
Zach Saucier 14 апр. 2014, в 15:55
3

эта скрипка с твоим кодом работает ...
Simone Melloni 14 апр. 2014, в 15:58
0

Спасибо. Я хочу, чтобы элементы были в отдельных строках. <br /> в этом случае не сработало.
madu 15 апр. 2014, в 01:09

Показать ещё 1 комментарий

Теги:

html

css

image

center

1 ответ

Ещё вопросы

Что не сработало в перечисленных решениях? Это очень распространенный вопрос / решение
эта скрипка с твоим кодом работает ...
Спасибо. Я хочу, чтобы элементы были в отдельных строках. <br /> в этом случае не сработало.

Simon · Answer 1 · 2014-04-14T14-17-00.000Z

Недавно я столкнулся с этим вопросом. Вот что я придумал:

HTML

<section id="abc">   
    <div class="table-cell">
        <div class="table-center">
            Centered
        </div>   
    </div> 
</section>

CSS

#abc {
    background: url(http://i.imgur.com/nvH8nI3.jpg) 50% 0 repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 500px;
    display: table;     
    -moz-box-shadow: inset 0 0 20px #333;
    -webkit-box-shadow: inset 0 0 20px #333;
    box-shadow: inset 0 0 20px #333;
}

.table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.table-center {
    display: inline-block;
    width: 460px;
    background: rgba(45, 45, 45, 0.80);
    border-radius: 5px;
    padding: 30px 30px;
    -webkit-box-shadow: 0 0 7px 2px #0F1519;
    box-shadow: 0 0 7px 2px #0F1519;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

http://jsfiddle.net/3Js35/2/

Спасибо Саймон. Но это включает в себя указание ширины. Я не хочу к этому, поскольку я хочу, чтобы это было отзывчивым. Если я уберу ширину, то изображение изменится до ширины центра таблицы.
Вы можете использовать медиа-запросы для этого.