3

Bem, dividi a parte de conteúdo, em duas divs, col-md-6, só que elas não ficam centralizadas em relação ao site, apesar de estarem no centro, estão colocadas no lado esquerdo, deixando o lado direito um pouco vazio. Segue o código das divs.

        <div class="content">

            <div class="container clearfix">
                                <div class="col-md-6 configdiv">
                                    <img src="/layout/images/imagem1.png" />
                                    <h5>TITULO 1</h5>
                                    <p>
                                    Oi, tudo bem? Oi, tudo bem? Oi, tudo bem?
                                    Oi, tudo bem?
                                    Oi, tudo bem?
                                    <p>
                                    <div>
                                        <img src="/layout/images/iconemail.png" />
                                        <img src="/layout/images/iconefb.png" />
                                        <img src="/layout/images/iconett.png" />
                                    </div>
                                </div>
                                <div class="col-md-6 configdiv">
                                    <img src="/layout/images/imagem2.png" />
                                    <h5>TITULO 2</h5>
                                    <p>
                                        Oi, tudo bem?
                                    <p>
                                    <div>
                                    <img src="/layout/images/iconemail.png" />
                                    <img src="/layout/images/iconefb.png" />
                                    <img src="/layout/images/iconett.png" />
                                    </div>
                                </div>
            </div>

        </div>

    </section><!-- #content end -->

E o CSS tem isso:

    .configdiv {border: 1px solid #DDDDDD;
           margin-right: 28px;
           margin-bottom: 25px;
           padding: 10px;

Lembrando, essas duas divs col-md-6, ficam uma do lado da outra, quero que fique centralizada em relação a tela! Conteúdo do content:

        Content----------------------------------------------------*/
        #content {
    position: relative;
    overflow: hidden;
     background-color: #FFF;
    }

     #content p { line-height: 1.8; }

    .content-wrap {
    position: relative;
    padding: 80px 0;
    }

    #content .container { position: relative; }


       /* ----------------------------------------------------------------
5
  • Você adicionou um margin-right na div que contem o col-md-6 isso pode estar causando o espaçamento, outra coisa, a classe content possui algum css ? Commented 16/07/2015 às 13:17
  • Já tinha feito o teste, sem o margin-right, as duas divs ficariam colocadas, aí adicionei o margin right pra div que está do lado esquerdo da tela, ficar meio separada da do lado direito. Commented 16/07/2015 às 13:33
  • Tentei colocar em outra classe o margin right, deixando só nas div que está do lado esquerdo, mesmo assim, não fica do jeito que quero! E no content tem isso: Commented 16/07/2015 às 13:34
  • Adicionei o content no post. Commented 16/07/2015 às 13:38
  • Use tags relevantes "a duvida" por favor, cada tag tem uma descrição para o entendimento. Nota: bootstrap é uma tag para um procedimento (ou série de procedimentos) quando um aplicativo é iniciado ou é feito uma requisição web. Para bootstrap "framework front-end" use twitter-bootstrap. Boa sorte com as respostas.
    – Syzoth
    Commented 16/07/2015 às 18:32

3 Respostas 3

4

Você poderia fazer da seguinte forma:

<div class="container">
    <div class="col-md-6">
        <div class="configdiv">
            ...
        </div>
    </div>
    <div class="col-md-6">
        <div class="configdiv">
            ...
        </div>
    </div>
</div>

Dessa forma as divs ficaram espaçadas e centralizadas uma ao lado da outra.

Container: Centralizara as divs.

Col-md-6: Os cols criam um padding de 15px para cada lado se você adicionar um border junto a div do col elas vao ficar coladas ja se você adicionar em uma div dentro do col irá funcionar da forma que você quer, não adicionei a classe ROW pois ela remove o padding adicionado pelo col as divs.

3

Recomendo não mexer margin laterias da classe de coluna (col-md-*) pois atrapalha a estrutura grid.

Você pode centralizar os textos usando a classe .text-center ou col-md-offset-* para empurrar o bloco no lado esquerdo, por exemplo:

<div class="row">
    <div class="col-md-5 col-md-offset-1>
        ...
    </div>
    <div class="col-md-5>
        ...
    </div>
</div>

Ou diminuir mais o bloco (centralizar mais):

<div class="row">
    <div class="col-md-4 col-md-offset-2>
        ...
    </div>
    <div class="col-md-4>
        ...
    </div>
</div>

Ou assim, um pouco gambiarra:

<div class="row">
    <div class="centraliza">
        <div class="col-xs-6">
            ...
        </div>
        <div class="col-xs-6">
            ...
        </div>
    </div>
</div>

.centraliza {
    width: 555px;
    margin: auto;
    height: 375px; //Se quer altura automática, é só deletar essa linha
}

Coloquei div.centraliza no lugar div.container pois possui quase mesmo comportamento porém o .centraliza você aproveita com qualquer tamanho.

5
  • As divs ficaram muito reduzidas. O Tamanho delas tem que ser W:555, H: 375, tem como mudar isso? Commented 16/07/2015 às 13:44
  • Isso é outra alternativa, é mais manual. Você tem que usar o div com margin:auto e tamanhos fixos que centraliza. Dá uma googlada com título centralizar DIV HTML, deixa o bootstrap pro lado pois o objetivo desse framework Bootstrap é estruturar e inserir elementos prontos. Commented 16/07/2015 às 13:59
  • Atualizei a resposta, de uma olhada Commented 16/07/2015 às 14:09
  • Tem outro objeto em baixo, col-md-12, tem que ter um margin-bottom pra não ficar essas duas divs, com essa div de baixo. Se eu usar tamanhos fixos, como fica o responsivo?... Commented 16/07/2015 às 14:10
  • Usa a tecnica design responsive no CSS para alterar o valor da classe .centraliza Commented 16/07/2015 às 14:11
0

Veja se esse código resolve seu problema. Repare que antes do col-md-6 temos uma div col-md-12 e se quiser centralizar o conteudo o text-align:center.

.configdiv 
{
  border: 1px solid #DDDDDD;
  //margin-right: 28px;
  //margin-bottom: 28px;
  padding: 10px;
}

//caso queira uma div md-6 lado a lado na tela margin-right e margin-bottom devem estar comentados ou retirados do seu código. Caso queira distancia entre eles use col-md-offset-1 2 ou 3... 
<div class="content">
            <div class="col-md-12 container clearfix">
                <div class="row">
                    <div class="col-md-6 configdiv" style="text-align:center">
                        <img src="/layout/images/imagem1.png" />
                        <h5>TITULO 1</h5>
                        <p>
                            Oi, tudo bem? Oi, tudo bem? Oi, tudo bem?
                            Oi, tudo bem?
                            Oi, tudo bem?
                        <p>
                        <div>
                            <img src="/layout/images/iconemail.png" />
                            <img src="/layout/images/iconefb.png" />
                            <img src="/layout/images/iconett.png" />
                        </div>
                    </div>

                    <div class="col-md-6 configdiv" style="text-align:center">

                        <img src="/layout/images/imagem2.png" />
                        <h5>TITULO 2</h5>
                        <p>
                            Oi, tudo bem?
                        <p>
                        <div class="center-block">
                            <img src="/layout/images/iconemail.png" />
                            <img src="/layout/images/iconefb.png" />
                            <img src="/layout/images/iconett.png" />
                        </div>

                    </div>
                </div>                
            </div>
        </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .