How do I middle align and left align this text to the image in the button?
I know I can use HTML code, but what does that code look like?
Firstly, left align all text to the image?
And then how do I center align the text to the image?
Solved
Align Middle/Left Align Text to Image
Best answer by ArunDubey
See there are two ways.
- Either you can use html table with one row and two columns. you can set the height and width of table as par your need. and then put the image under first column and text under second column.
<table style="width: 100%">
<tr>
<td style="width: 30%"> <img src="image URL" alt="xyz" style="width:100%"></td>
<td style="width: 70%">Description of image</td>
</tr>
</table>- Or you can use two div tags using style “float: left;” and div width in the ratio of 30:70%. this will align both divs side by side.
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.tr::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="tr">
<div id="x1" style="float: left; width: 30%; padding: 2px;">
<img src="image URL" alt="xyz" style="width:100%">
</div>
<div id="x2" style="float: left; width: 70%; padding: 2px;">
Description of image
</div>
</div>
</body>
</html>
+41Can you please clarify it bit more. how and where you are using it and if you have any backend html script of it then please share.
But want more space between the image and the text and I want all the text to align with each other.
Hi
Based on your screenshots, I think you are looking for setup similar to below link. Instead of Images you may have to create Div element for text and manage it.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_grid_responsive
Hope it helps.
Thanks,
JB
+41See there are two ways.
- Either you can use html table with one row and two columns. you can set the height and width of table as par your need. and then put the image under first column and text under second column.
<table style="width: 100%">
<tr>
<td style="width: 30%"> <img src="image URL" alt="xyz" style="width:100%"></td>
<td style="width: 70%">Description of image</td>
</tr>
</table>- Or you can use two div tags using style “float: left;” and div width in the ratio of 30:70%. this will align both divs side by side.
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.tr::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="tr">
<div id="x1" style="float: left; width: 30%; padding: 2px;">
<img src="image URL" alt="xyz" style="width:100%">
</div>
<div id="x2" style="float: left; width: 70%; padding: 2px;">
Description of image
</div>
</div>
</body>
</html>
~ Arun Kumar Dubey
Is there something I can put in the table properties to expand/making the spacing larger between columns 1 and 2 but NOT the whole table?
+41Yes, you can pas style="border-spacing: 10px;" in <table> tag. If you want to add padding then you can pass style="padding:5px" in both <td> tags.
I tried your above suggestion: border-spacing:10px;width:500px;
I don’t want the whole table padded - just the highlighted portion:
Thoughts?
+41Try use margin css property on table.
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 5px;
Or you can use padding css property under td.
Discovered the Cell Properties section - instead of table properties.
Was able to update everything as needed within Cell Properties - without custom code.
Thanks all!
+41Great, good luck!!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.