/ / центриран текст у дата-реченици ХТМЛ / ЦСС - хтмл, цсс

центрирани текст у реченицама ХТМЛ / ЦСС - хтмл, цсс

Не могу да обавим задатак: центрирајте текст из атрибута дата-сентенце После лебдења изнад слике (центрирано хоризонтално): https://jsfiddle.net/m59azhn8/1/

[data-sentence] {
position: relative;
}

[data-sentence]::after {
content: attr(data-sentence);
text-align: center;
padding: 5px;
font-size: 17px;
background: #333;
color: #fff;
z-index: 1000;
display: none;
position: absolute;
top: calc(100% - 55px);
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
left: 50%;
right: 0;
min-width: 245px;
min-height: 50px;
transform: translate(-50%, 0);
}

[data-sentence]:hover::after {
display: block;
}

[data-sentence=""]::after {
display: none !important;
}

Одговори:

0 за одговор № 1

Ево једноставног решења са флек-бок-ом. Надам се да ово помаже. Нев https://jsfiddle.net/m59azhn8/2/

<head lang="en">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" media="all" href="./css/all.css">
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="./js/all.js"></script>
<style>
body {
text-align: center;
margin: 0;
padding: 0;
}

.characters {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}

ul li {
list-style-type: none;
display: inline;
}

input#checkbox_yoda + label {
background: url("https://image.ibb.co/fqqbDn/yoda.png") no-repeat;
background-size: 100%;
height: 250px;
width: 250px;
display:inline-block;
}

input#checkbox_trooper + label {
background: url("https://image.ibb.co/jBdk67/trooper.png") no-repeat;
background-size: 100%;
height: 250px;
width: 250px;
display:inline-block;
}

input#checkbox_vader + label {
background: url("https://image.ibb.co/chLbDn/vader.png") no-repeat;
background-size: 100%;
height: 250px;
width: 250px;
display:inline-block;
}

label[for=checkbox_yoda] {
border: 3px solid white;
border-radius: 20px;
color: transparent;
}

label[for=checkbox_trooper] {
border: 3px solid white;
border-radius: 20px;
color: transparent;
}

label[for=checkbox_vader] {
border: 3px solid white;
border-radius: 20px;
color: transparent;
}

input:hover + label {
border: 3px solid black;
border-radius: 20px;
cursor: pointer;
}

input:checked + label {
border: 3px solid black;
border-radius: 20px;
cursor: pointer;
}

input[type=checkbox] {
display: none;
}

[data-sentence] {
position: relative;
}

[data-sentence]::after {
content: attr(data-sentence);
text-align: center;
vertical-align: middle;
padding: 5px;
font-size: 17px;
background: #333;
color: #fff;
z-index: 1000;
display:none;
align-items:center;
justify-content:center;

position: absolute;
top: calc(100% - 55px);
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
left: 50%;
right: 0;
bottom: 0;
min-width: 245px;
min-height: 50px;
transform: translate(-50%, 0);
}

[data-sentence]:hover::after {
display: flex;
}

[data-sentence=""]::after {
display: none !important;
}
</style>
</head>

<body>
<section class="characters">
<form action="#" method="get">
<input type="hidden" name="v" value="dQw4w9WgXcQ">
<ul>
<li>
<input id="checkbox_yoda" type="checkbox" name="character" value="light_side">
<label for="checkbox_yoda" data-sentence="Force is strong in you">Yoda</label>
</li>
<li>
<input id="checkbox_trooper" type="checkbox" name="character" value="dark_side">
<label for="checkbox_trooper" data-sentence="Just chillin"">Trooper</label>
</li>
<li>
<input id="checkbox_vader" type="checkbox" name="character" value="dark_side">
<label for="checkbox_vader" data-sentence="There is no escape from the Dark Side.">Vader</label>
</li>
</ul>
<button type="submit">Turn to the dark side</button>
</form>

</section>
</body>

</html>

Сродна питања


Коментари (0)

Додајте коментар