Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Como centrar texto e imagenes en filas Page Builder

CSS - Como centrar texto e imagenes en filas Page Builder

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Como centrar texto e imagenes en filas Page Builder

Publicado por xabi (3 intervenciones) el 25/01/2017 10:45:32
Hola a todos,

Estoy diseñando una página donde incluyo con Page Builder 2 filas para tener un grid de 2x2 donde conbino imágenes y texto. La cuestión es que no acierto a darle el estilo a través de CSS para que me quede como yo quiero.
lo que quiero es esto:

Screenshot-25_01_2017-10_26_57

pero no consigo tener el texto centrado, con el background blanco y responsive.

Alguien me puede decir cual sería la forma más fácil de centrar ese texto respecto a la imagen. es posible hacerlo con flexbox?

la pagina que estoy trabajando es:
http://ikuxka.com/onure-dev/

Gracias de antemano,
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como centrar texto e imagenes en filas Page Builder

Publicado por Brayan (16 intervenciones) el 25/01/2017 13:38:38
Viendo tu pagina logre ver que el texto no esta centrado,

Utiliza este código y debería solucionarse:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="textwidget">
   <p style="text-align: center;">
      <span style="font-size: 24pt;">
         LA BELLEZA COMIENZA CON LA DECISION DE SER UNO MISMO
      </span>
   </p>
   <p style="text-align: left;">
      &nbsp;
   </p>
   <p style="text-align: center;">
      COCO CHANEL
   </p>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Como centrar texto e imagenes en filas Page Builder

Publicado por xabi (3 intervenciones) el 25/01/2017 14:16:35
Gracias por la respuesta Brayan .

Quizás me he explicado mal. Lo que quiero es centrar el texto verticalmente, manteniendo el background blanco en todo el div la misma altura que las fotos y que sea responsive cuando voy cambiando de tamaño de pantalla.
estoy intentándolo por medio de CSS pero imposible.
He intentado hacer algo parecido con flexbox pero estoy un poco verde. os dejo el código que estoy probando en
1
http://codepen.io/xabiliza/pen/apJwKN

el html:

1
2
3
4
5
6
7
8
9
10
11
12
<header>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/MASAJES.jpg" alt></div>
  <div class=texto><h1> TITLE</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>
 
</header>
 
<header>
 <div class=texto><h1> TITLE</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/MASAJES.jpg" alt></div>
 
 
</header>

el css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body { margin: 0; background: #333; }

header {
  background: #fff;

  padding: 0;
  width:70%;
  color: black;
 
 /*flexbox*/
  display: flex;
  justify-content: center;
 
}
div {
  margin: 0;
  flex-grow:1;
  width:50%;
}
img {
  width: 100%;
  height: auto;
}
 
.texto {
 
  padding:50px;
  flex-flow: row wrap;
  display: flex;
}
 
h1{
text-align: center;
  font-size:40px;
}
 
@media screen and (max-width: 400px) {
  header div { margin: 0; }
  header { padding: 0; }
 
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como centrar texto e imagenes en filas Page Builder

Publicado por Brayan (16 intervenciones) el 25/01/2017 15:17:13
Bueno te hice un código básico en lo que estas haciendo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<style>
 
    body {
    margin: 0;
    background: #333; 

    }
 
    div{
        width: 35%;
        border: solid 1px black;
 
    }
 
    .container{
        width: 100%;
        background: #fff;

        display: flex;
        justify-content: space-around;
        flex-flow: wrap;
 
    }
 
    img{
        width: 100%;
    }
 
    .texto{
        font-size: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
 
    h1{
        margin: 0 auto;
    }
 
    @media screen and (max-width:500px){
        .texto{
            font-size: 9px;
        }
    }
 
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<header class="container">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/MASAJES.jpg" width="500"/>
</div>
<div class="texto">
<h1> TITLE</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
 
 
<div class="texto">
<h1> TITLE</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/MASAJES.jpg" width="500">
</div>
</header>

hay un detalle importante cuando hagas responsive utiliza firefox para ver como se veria en ciertos dispositivos con el atajo Shift+control+M, te da una ventana para ver los diseños en diferentes medidas.

otro detalle es que obviamente es muy básico y por ende tiene ciertas cosas que se escapan de un buen diseño como el background, pero son cosas que puedes mejorar tu mismo.

las mediaqueries debes hacerle mas modificaciones para las diferentes pantallas y necsidades

PD: Si no es mucha molestia y te fue de ayuda valora para así ser un punto de referencia para otros, comentanos los resultados
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Como centrar texto e imagenes en filas Page Builder

Publicado por xabi (3 intervenciones) el 26/01/2017 08:52:36
Gracias por la respuesta.
La verdad es que no me arreglo con flexbox para dejarlo como yo quiero (en la foto inicial) Si alguien quiere intentarlo y comentar los resultados os dejo el enlace de codepen.io para trastear. http://codepen.io/xabiliza/pen/apJwKN

Por mi parte he jugado con CSS y las Media Queries para dejarlo los más decente posible.

He jugado con el padding, cambiandolo para cada tamaño de pantalla. He tenido que forzarlo con !important y dejar las media queries al final del código para que funcione.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 45
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como centrar texto e imagenes en filas Page Builder

Publicado por Brayan (16 intervenciones) el 26/01/2017 15:42:17
Creo estamos complicando mucho acomode el código, lo que hice fue anidar un div de clase otro, revisarlo y me avisas.

Aqui el codigo html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<header class="container">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/MASAJES.jpg" width="500"/>
</div>
<div class="texto">
  <div class="otro">
<h1> TITLE</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
</div>
 
 
<div class="texto">
  <div class="otro">
<h1> TITLE</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/MASAJES.jpg" width="500">
</div>
</header>


y aquí te dejo el css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
body {
    margin: 0;
    background: #333; 

    }
 
    div{
        width: 35%;
        border: solid 1px black;
 
    }
 
    .container{
        width: 80%;
        background: #fff;

        display: flex;
        justify-content: space-around;
        flex-flow: wrap;
 
    }
 
    img{
        width: 100%;
    }
 
    .texto{
 
        font-size: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
 
    h1{
        margin: 0 auto;
    }
 
.otro{
  margin:auto;
  border:none;
}
 
    @media screen and (max-width:500px){
        .texto{
            font-size: 9px;
        }
    }


Comenta si necesitas algo mas amigo (Y)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar