Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Centrar texto en imagen

CSS - Centrar texto en imagen

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 16
Ha disminuido su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

Centrar texto en imagen

Publicado por Jan (7 intervenciones) el 24/04/2018 12:40:23
Buenas.
Necesito centrar el texto que veran a continuación en el centro de esta imagen y nose como hacerlo.

CÓDIGO 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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="es-EN">
    <head>
        <!-- No repetir el title y la description en otras paginas. Siempre cambiar -->
        <meta charset="UTF-8">
        <title>Alquiler drones Barcelona | Topcamdrone</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="keywords" content="drones barcelona, alquiler drones, filiming, experiencia">
        <!-- Un máximo de 4 keywords, Google no da mucha importancia, BING si -->
        <meta name="description" content="Empresa dedicada al alquiler de drones en Barcelona: servicios de filming, TV, grabación de anuncios publicitarios">
        <!-- Repetiremos un MÁXIMO de 2 keywords en el description -->
        <meta name="author" content="https://aincraft.be">
        <meta name="owner" content="Paco Sánchez Perez">
        <meta name="robots" content="index, follow">
        <!-- Es importante poner follow a todas las paguinas -->
        <!-- 

        Al especificar esto, le decimos a Google que nuestra indexacion es urgente 

        Valores disponibles:

            - INDEX/NOINDEX -> SIndica si se desea o no, permitir la indexación de la página por los   motores de búsqueda

            - FOLLOW/NOFOLLOW -> Se indica si se debe o no permitir a los SE recorrer o seguir         recorriendo la web a través de los enlaces que encuentre en el cuerpo del documento 

            - ARCHIVE/NOARCHIVE -> Si queremos o no que el SE guarde nuestra información en una       cache interna

            - SNIPPET/NOSNIPPET -> Mostrar o no descripción de la página. Si se activa, tambien se     activa automaticamente la opción de NOARCHIVE

            - ODP/ NOODP -> Sirve para decirle al buscador que debe, o no, mostrar título o descripcion iguales a los que se encuentra en el Open Directory Project.



        -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/Helvetica.css">
        <script src="js/modernizr-custom.js"></script>
 
        <!-- Los títulos escritos -->
    </head>
    <body>
        <header>
            <h1>
                <a href="index.htm">
                    <figure>
                        <img src="fotos/logo-topcamdrone.png" alt="logo topcamdrone">
                        <!-- Aqui va a ser el LOGO y el "value of experience" -->
                    </figure>
                </a>
                <a href="index.htm">The value of experience</a>
            </h1>
            <!-- Esta parte no aparece en el menu móbil -->
 
            <nav id="ioMenu"> <!-- Input/Output menu -->
                <figure id="showMenu" class="ioMenuMovil"><img src="ico/menu.svg" alt=""></figure>
                <!-- La imagen vectorial "menu.svg" aparecera cuando el menu de tipo carta no se active en versión mobil -->
                <div id="card_menu">
                    <figure id="hideMenu" class="ioMenuMovil"><img src="ico/cross-exit.svg" alt=""></figure>
                    <!-- Esta imagen vectorial aparecera cuando el menu de tipo carta sea activado y al hacer clic a la cruz se cerrara -->
                    <figure id="logo_menu"><img src="fotos/drone.png" alt=""></figure>
                    <!-- La foto "drone.png" aparecera en el menu mobil al ser activado -->
                    <ul>
                        <li><a href="#">Inicio</a></li>
                        <li><a href="#">Servicios</a></li>
                        <li><a href="#">Trabajos</a></li>
                        <li><a href="#">Nosotros</a></li>
                        <li><a href="#">Contacto</a></li>
                        <li><a href="#">Clientes</a></li>
                        <!-- Cabe destacar que este menu esta haciendo referencia al menu MÓBIL -->
                    </ul>
                </div>
            </nav>
 
 
            <div id="prev_section">
                <!-- No rotada -->
                <img src="ico/undo2.svg" alt="">
            </div>
 
            <div id="next_section">
                <img src="ico/undo2.svg" alt="">
            </div>
        </header>
 
 
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-117952001-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-117952001-1');
        </script>
    </body>
</html>
CSS3:
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/* 

Mobile first 

Author: Jan Sánchez van den Berg

*/
 
body {
    font-size: 16px;
    font-family: "Helvetica", sans-serif;
    background: purple;
    position: relative;
}
 
header {
    width: 100%;
    height: 40px;
    background: white;
}
header h1 {
    display: none;
}
header nav {
    display: none;
}
header div#prev_section,

header div#next_section{

    width: 35px;
    height: 29px;
    cursor: pointer;
    margin: 5px;
    position: absolute;
    top: 0px;
}
header div#prev_section {

    right: 50px;
    top: -3px;
}
header div#next_section {

    right: 5px;
}
header div#next_section {

    transform:rotate(180deg);
}
 
 
@media screen and (min-width: 480px) {
    /* Smartphone horizontal screen */
    body {
        background: red;
    }
}
@media screen and (min-width: 600px) {
    /* Tablet */
    body {
        background: orange;
    }
}
@media screen and (min-width: 767px){
    /* Pantalla escritorio o tablet horizontal grande */
    body {
        background: white;
    }
    header div#next_section,

    header div#prev_section{

        position: absolute;
        width: 50px;
        height: 50px;
        background: purple;
        right: 40px;
        z-index: 999;
        border-radius: 50%;
    }
    header {
        height: 50px;
        background: yellow;
    }
 
    header h1 {
        display: inline-block;
        width: 20%;
        margin: 0px;
        height: 50px;
        margin-left: 80px;
        line-height: 50px;
        /* Tamaño elemento padre (height=50px) */
        min-width: 200px;
    }
    header h1 > *{
        /*Para que se cumpla la condición, header h1 debe ser hijo de todos  */
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        color: #8E8D8D;

        font-size: 0.8em;
        /* 80% del padre */
        margin: 0px 3px;
    }
    a[href="index.htm"] {
 
    }
    header h1 figure {
        height: 40px;
        width: 40px;
        margin: 0px;
        position: relative;
        bottom: 4px;
    }
 
    header div#prev_section {

        top: 115px;
    }
    header div#next_section {

        top: 190px;
    }
    header div#prev_section img,

    header div#next_section img {

        width: 100%;
        top: 0px;
        left: 0px;
        margin: 0px;
        height: 50px;
    }
}
@media screen and (min-width: 950px){
    /* Tamaño intermedio */
    body {
        background: green;
    }
}

Imagen explicativa: http://prntscr.com/j9esod
El texto este "The value of experience" quiero que aparezca abajo del logo en el centro...

Espero que me puedan ayudar.
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
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Centrar texto en imagen

Publicado por juan jose (57 intervenciones) el 24/04/2018 14:17:12
0E4


Html modificado



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</head>
    <body>
        <header>
			<!-- codigo moficado-->
			<a class="slogan"href="index.htm">
				<figure href="index.html">
					<img src="logotop.png" alt="logo topcamdrone">
					<p class="slogan">Value Of Experience </p>
				</figure>
			</a>
 
 
            <!-- Esta parte no aparece en el menu móbil -->
 
            <nav id="ioMenu"> <!-- Input/Output menu -->


Css añadido



1
2
3
4
5
6
7
8
9
/* clase creada que afecta al enlace y al Value of Experience */
 	.slogan{
	text-align:center;
	text-decoration:none;
	margin:0;
	padding:0;
	font-size;16px;
 
	}
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