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:
CSS3:
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.
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>
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
0