• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

Jak wyśrodkować obrazek oraz tekst (span) w pionie?

Object Storage Arubacloud
+1 głos
806 wizyt
pytanie zadane 10 lipca 2021 w HTML i CSS przez Doge Gaduła (3,370 p.)

Witam, w jaki sposób mogę wyśrodkować tekst i obrazek w pionie? Ponieważ mam coś takiego:

i chciałbym zrobić albo tak, aby tekst był na środku obrazka lub najlepiej tak, aby obrazek oraz tekst wyśrodkować w pionie, ponieważ wtedy wyjdzie na to samo oraz będzie ładnie wyglądać względem czerwonego diva. Jaki jest na to najlepszy sposób? Jeżeli coś to zmieni to dodam tylko, że tekst zamknąłem w spanie.

 

1
 komentarz 10 lipca 2021 przez pablop76 VIP (123,180 p.)
Wstaw kod
 komentarz 10 lipca 2021 przez Doge Gaduła (3,370 p.) 
function relict_shop()
{
	document.getElementById("action1").innerHTML = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy1()">Buy 1</span>';
	document.getElementById("action2").innerHTML = '<img src="img/relict2_1.png" class="relict" /><span onclick="buy2()">Buy 2</span>';
	document.getElementById("action3").innerHTML = '<img src="img/relict3_1.png" class="relict" /><span onclick="buy3()">Buy 3</span>';
	document.getElementById("action4").innerHTML = '<img src="img/relict4_1.png" class="relict" /><span onclick="buy4()">Buy 4</span>';
}
.inaction
{
	width: 450px;
	height: 71px;
	margin: 17px 10px 0px 15px;
	float: left;
	background-color: red;
	text-align: center;
	font-size: 20px;
}
.relict
{
	width: 25px;
	height: 25px;
	margin: 10px 5px 0px 0px;
}

 

 komentarz 10 lipca 2021 przez Doge Gaduła (3,370 p.)

całość kodu:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="container" class="container">
		<div id="resources" class="resources">
			<div id="coins" class="coins">
				<span id="coin" class="coin">0 coins</span>
			</div>
			<div id="per_clicked" class="coins">
				<span id="per_click" class="coin">0 per click</span>
			</div>
		</div>
		<div id="main" class="main">
			<div id="clicker" class="clicker">
				<button class="btn" onclick="luck_function()"><img id="doge" class="doge" width="200" height="200" src="img/doge.png" /></button>
			</div>
			<div id="action" class="action">
				<div id="action1" class="inaction"></div>
				<div id="action2" class="inaction"></div>
				<div id="action3" class="inaction"></div>
				<div id="action4" class="inaction"></div>
			</div>
			<div id="shop" class="shop" onclick="shop()">
				<img class="shopping_cart_img" src="img/shopping_cart.png" width="50" height="50" />
			</div>
		</div>
	</div>
</body>
</html>
body
{
	background-image: url("img/body_background.jpg");
	user-select: none;
}
.container
{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	min-height: 500px;
	background-color: red;
}
.resources
{
	background: linear-gradient(45deg, #e66465, #9198e5);
	text-align: center;
	font-size: 40px;
	height: 200px;
	width: 1198px;
	padding: 1px;
}
.main
{
	background-color: purple;
	width: 1198px;
	height: 300px;
	padding: 1px;
}
.action
{
	float: right;
	width: 960px;
	height: 202px;
	background-color: green;
	margin: 10px 10px 0px 0px;
}
.coins
{
	height: 100px;
	width: 500px;
	border: 3px solid black;
	margin: 40px 10px 0px 60px;
	float: left;
}
.coin::before
{
	content: "";
	background-image:url(img/coin.png);
	background-size: 100% 100%;
	display: inline-block;
	
	/*rozmiar ::before background*/
	height: 50px;
	width: 50px;
	
	position: relative;
	top: 15px;
}
.coin2::before
{
	content: "";
	background-image:url(img/coin.png);
	background-size: 100% 100%;
	display: inline-block;
	
	/*rozmiar ::before background*/
	height: 25px;
	width: 25px;
	
	position: relative;
	top: 5px;
}
#per_clicked
{
	font-size: 20px;
}
.clicker
{
	width: 200px;
	height: 200px;
	background-color: purple;
	margin: 10px 10px 10px 10px;
	transition: 0.1s;
	float: left;
}
.clicker:active
{
	width: 210px;
	height: 210px;
	margin: 5px;
}
.doge
{
	user-select: none;
	transition: 0.1s;
}
.doge:active
{
	width: 210px;
	height: 210px;
}
.clicker img
{
	display: block;
}
.btn
{
	border: none;
	padding: 0px;
	cursor: pointer;
}
.inaction
{
	width: 450px;
	height: 71px;
	margin: 17px 10px 0px 15px;
	float: left;
	background-color: red;
	text-align: center;
	font-size: 20px;
}
.shop
{
	height: 50px;
	width: 50px;
	background-color: yellow;
	cursor: pointer;
	margin: 10px 10px 10px 10px;
	transition: 0.3s;
	clear: both;
}
.shop:hover
{
	width: 70px;
	height: 70px;
	margin: 5px 5px 5px 5px;
}
.shopping_cart_img
{
	display: block;
	transition: 0.3s;
}
.shopping_cart_img:hover
{
	width: 70px;
	height: 70px;
}
.relict
{
	width: 25px;
	height: 25px;
	margin: 10px 5px 0px 0px;
}
var coins = 99999;
var coins_per_click = 1;
var upgrade_clicked_cost = 10;
var coins_per_second = 0;
var upgrade_per_second_cost = 100;
var luck = 0;
var upgrade_luck_cost = 1000;
window.onload = loading;
function loading()
{
	coins_update();
	per_clicked_update();
	luck_function_per_second();
}
function coins_update()
{
	document.getElementById("coins").innerHTML = '<span id="coin" class="coin">'+coins.toLocaleString('pl-PL')+' coins</span>';
}
function per_clicked_update()
{
	document.getElementById("per_clicked").innerHTML = '<span id="per_click" class="coin2">'+coins_per_click+' per click | Upgrade cost: '+upgrade_clicked_cost+'</span> <br /> <span id="per_second" class="coin2">'+coins_per_second+' per second | Upgrade cost:'+upgrade_per_second_cost+'</span> <br /> <span id="luck" class="coin2">Luck: '+luck+'% for double coins | Upgrade cost: '+upgrade_luck_cost+' coins</span>';
}
function shop()
{
	document.getElementById("action1").innerHTML = '<span onclick="upgrade_clicked()">Upgrade per click</span>';
	document.getElementById("action2").innerHTML = '<span onclick="upgrade_per_second()">Upgrade per second</span>';
	document.getElementById("action3").innerHTML = '<span onclick="upgrade_luck()">Upgrade luck</span>';
	document.getElementById("action4").innerHTML = '<span onclick="relict_shop()">Relict shop</span>';
}
function relict_shop()
{
	document.getElementById("action1").innerHTML = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy1()">Buy 1</span>';
	document.getElementById("action2").innerHTML = '<img src="img/relict2_1.png" class="relict" /><span onclick="buy2()">Buy 2</span>';
	document.getElementById("action3").innerHTML = '<img src="img/relict3_1.png" class="relict" /><span onclick="buy3()">Buy 3</span>';
	document.getElementById("action4").innerHTML = '<img src="img/relict4_1.png" class="relict" /><span onclick="buy4()">Buy 4</span>';
}
function upgrade_clicked()
{
	if(coins >= upgrade_clicked_cost)
	{
		coins_per_click++;
		coins -= upgrade_clicked_cost;
		upgrade_clicked_cost *= 2;
		coins_update();
		per_clicked_update();
	}
	else
	{
		document.getElementById("action1").innerHTML = 'You don\'t have enough coins';
		setTimeout(function() {document.getElementById("action1").innerHTML = '<span onclick="upgrade_clicked()">Upgrade per click</span>';}, 2000)
	}
}
function upgrade_per_second()
{
	if(coins >= upgrade_per_second_cost)
	{
		coins_per_second++;
		coins -= upgrade_per_second_cost;
		upgrade_per_second_cost *= 2;
		coins_update();
		per_clicked_update();
	}
	else
	{
		document.getElementById("action2").innerHTML = 'You don\'t have enough coins';
		setTimeout(function() {document.getElementById("action2").innerHTML = '<span onclick="upgrade_per_second()">Upgrade per second</span>';}, 2000)
	}
}
function upgrade_luck()
{
	if(luck == 100)
	{
		document.getElementById("action3").innerHTML = 'You have upgraded luck to the maximum level';
		setTimeout(function() {document.getElementById("action3").innerHTML = '<span onclick="upgrade_luck()">Upgrade luck</span>';}, 2000)
	}
	else
	{
		if(coins >= upgrade_luck_cost)
		{
			luck++;
			coins -= upgrade_luck_cost;
			upgrade_luck_cost *= 2;
			coins_update();
			per_clicked_update();
		}
		else
		{
			document.getElementById("action3").innerHTML = 'You don\'t have enough coins';
			setTimeout(function() {document.getElementById("action3").innerHTML = '<span onclick="upgrade_luck()">Upgrade luck</span>';}, 2000)
		}
	}
}
function luck_function()
{
	var lucky_number = Math.floor(Math.random()*100)+1;
	if(lucky_number<=luck) //trafiono w luck
	{
		coins += coins_per_click*2;
	}
	else
	{
		coins += coins_per_click;
	}
	coins_update();
}
function luck_function_per_second()
{
	var lucky_number = Math.floor(Math.random()*100)+1;
	if(lucky_number<=luck)
	{
		coins += coins_per_second*2;
	}
	else
	{
		coins += coins_per_second;
	}
	coins_update();
	setTimeout("luck_function_per_second()", 1000);
}

 

2 odpowiedzi

+3 głosów
odpowiedź 10 lipca 2021 przez VBService Ekspert (253,280 p.)
wybrane 10 lipca 2021 przez Doge
 
Najlepsza

Do .inaction, dodaj

.inaction
{
  . . .

  display: flex;
  align-items: center;
  justify-content: center;
}

a w .relict ustaw tylko prawy margines

.relict
{
    width: 25px;
    height: 25px;
    margin-right: 5px; /* 5px wartość przykładowa */
}

 

+1 głos
odpowiedź 10 lipca 2021 przez pablop76 VIP (123,180 p.)

Środkowanie

 komentarz 10 lipca 2021 przez Doge Gaduła (3,370 p.)
próbowałem tego, ale jak dam top 50% to środkuje mi do głównego containera, a jak dodam całość to wyrzuca w ogóle na górę containera
 komentarz 10 lipca 2021 przez pablop76 VIP (123,180 p.)
Który element w tym kodzie chcesz wyśrodkować?
 komentarz 10 lipca 2021 przez Doge Gaduła (3,370 p.)
jak narazie próbowałem tylko z obrazkiem (.relict), ale będę chciał również tekst (spany)
 komentarz 10 lipca 2021 przez pablop76 VIP (123,180 p.)
Nie ma takiego elementu w Twoim kodzie. Rozumiem, ze jest dodawany przez js, ale na tym etapie go nie ma.
1
 komentarz 10 lipca 2021 przez pablop76 VIP (123,180 p.)

Masz odpowiedź od @ .::VBService::.

Dokładnie to miałem zaproponować.

Sposób z pozycją absolutną też jest dobry, ale musisz ustawić rodzica relatywnie. Przeanalizuj dokładnie te metody 

Na przyszłość nie każ nam analizowania kodu nie związanego z problemem.

 komentarz 10 lipca 2021 przez Doge Gaduła (3,370 p.)
Ustawiałem rodzica (czerwony div), lecz nie wiem dlaczego się rozjechało. Niezwiązany kod - chodzi o html czy o który?
 komentarz 10 lipca 2021 przez pablop76 VIP (123,180 p.)
edycja 10 lipca 2021 przez pablop76
Niezwiązany, czyli js, z którego wynika jaki element masz na myśli.

Podobne pytania

0 głosów
1 odpowiedź 125 wizyt
Jak to wyśrodkować w pionie? - błąd
pytanie zadane 21 października 2016 w C i C++ przez kieryk123 Początkujący (300 p.)
+1 głos
3 odpowiedzi 340 wizyt
Jak wyśrodkować obiekt w pionie i poziomie
pytanie zadane 12 października 2021 w HTML i CSS przez FabQ Początkujący (450 p.)
0 głosów
1 odpowiedź 244 wizyt
Obrazek nie chce się wyśrodkować - css
pytanie zadane 1 sierpnia 2017 w HTML i CSS przez norbik543 Użytkownik (690 p.)

92,567 zapytań

141,420 odpowiedzi

319,616 komentarzy

61,953 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...