table cell alignment with image and text
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
2
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p><img src="mail.ping" style="width: 30px;"></p>
<span>type-cedit ad=nd debit and shopping</td>
<td>description</td>
</tr>
</table>
The above image is show table data. when image and text aligned inside table cell.
This works fine when text is smaller. but when text size is large. text is appearing below image.
In above image i need to make the 'shopping' work should come jus below 'type' if length is large. Text should not appear below image. how can i fix this alignment issue
html css html-table alignment
asked Nov 22 '18 at 9:35
Siddu hSiddu h
3501517
add a comment |
2
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p><img src="mail.ping" style="width: 30px;"></p>
<span>type-cedit ad=nd debit and shopping</td>
<td>description</td>
</tr>
</table>
The above image is show table data. when image and text aligned inside table cell.
This works fine when text is smaller. but when text size is large. text is appearing below image.
In above image i need to make the 'shopping' work should come jus below 'type' if length is large. Text should not appear below image. how can i fix this alignment issue
html css html-table alignment
asked Nov 22 '18 at 9:35
Siddu hSiddu h
3501517
td {padding;left: width of image} td img {margin-left: -??px width of image}
– Carol McKay
Nov 22 '18 at 9:40
1
please add html code
– Hiren Vaghasiya
Nov 22 '18 at 9:52
@HirenVaghasiya can you please check above code..
– Siddu h
Nov 22 '18 at 10:38
add a comment |
2
2
2
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p><img src="mail.ping" style="width: 30px;"></p>
<span>type-cedit ad=nd debit and shopping</td>
<td>description</td>
</tr>
</table>
The above image is show table data. when image and text aligned inside table cell.
This works fine when text is smaller. but when text size is large. text is appearing below image.
In above image i need to make the 'shopping' work should come jus below 'type' if length is large. Text should not appear below image. how can i fix this alignment issue
html css html-table alignment
asked Nov 22 '18 at 9:35
Siddu hSiddu h
3501517
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p><img src="mail.ping" style="width: 30px;"></p>
<span>type-cedit ad=nd debit and shopping</td>
<td>description</td>
</tr>
</table>
The above image is show table data. when image and text aligned inside table cell.
This works fine when text is smaller. but when text size is large. text is appearing below image.
In above image i need to make the 'shopping' work should come jus below 'type' if length is large. Text should not appear below image. how can i fix this alignment issue
html css html-table alignment
html css html-table alignment
asked Nov 22 '18 at 9:35
Siddu hSiddu h
3501517
asked Nov 22 '18 at 9:35
Siddu hSiddu h
3501517
edited Nov 22 '18 at 10:37
Siddu h
asked Nov 22 '18 at 9:35
Siddu hSiddu h
3501517
asked Nov 22 '18 at 9:35
Siddu hSiddu h
3501517
asked Nov 22 '18 at 9:35
Siddu hSiddu h
3501517
3501517
td {padding;left: width of image} td img {margin-left: -??px width of image}
– Carol McKay
Nov 22 '18 at 9:40
1
please add html code
– Hiren Vaghasiya
Nov 22 '18 at 9:52
@HirenVaghasiya can you please check above code..
– Siddu h
Nov 22 '18 at 10:38
add a comment |
td {padding;left: width of image} td img {margin-left: -??px width of image}
– Carol McKay
Nov 22 '18 at 9:40
1
please add html code
– Hiren Vaghasiya
Nov 22 '18 at 9:52
@HirenVaghasiya can you please check above code..
– Siddu h
Nov 22 '18 at 10:38
td {padding;left: width of image} td img {margin-left: -??px width of image}
– Carol McKay
Nov 22 '18 at 9:40
td {padding;left: width of image} td img {margin-left: -??px width of image}
– Carol McKay
Nov 22 '18 at 9:40
1
1
please add html code
– Hiren Vaghasiya
Nov 22 '18 at 9:52
please add html code
– Hiren Vaghasiya
Nov 22 '18 at 9:52
@HirenVaghasiya can you please check above code..
– Siddu h
Nov 22 '18 at 10:38
@HirenVaghasiya can you please check above code..
– Siddu h
Nov 22 '18 at 10:38
add a comment |
1 Answer
1
active
oldest
votes
0
Applying display:inline-block or float:left you can align both
.divin{
display:inline-block;}<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>answered Nov 22 '18 at 11:12
Hiren VaghasiyaHiren Vaghasiya
3,9201621
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427811%2ftable-cell-alignment-with-image-and-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Applying display:inline-block or float:left you can align both
.divin{
display:inline-block;}<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>answered Nov 22 '18 at 11:12
Hiren VaghasiyaHiren Vaghasiya
3,9201621
add a comment |
0
Applying display:inline-block or float:left you can align both
.divin{
display:inline-block;}<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>answered Nov 22 '18 at 11:12
Hiren VaghasiyaHiren Vaghasiya
3,9201621
add a comment |
0
0
0
Applying display:inline-block or float:left you can align both
.divin{
display:inline-block;}<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>answered Nov 22 '18 at 11:12
Hiren VaghasiyaHiren Vaghasiya
3,9201621
Applying display:inline-block or float:left you can align both
.divin{
display:inline-block;}<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>.divin{
display:inline-block;}<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>.divin{
display:inline-block;}<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>answered Nov 22 '18 at 11:12
Hiren VaghasiyaHiren Vaghasiya
3,9201621
answered Nov 22 '18 at 11:12
Hiren VaghasiyaHiren Vaghasiya
3,9201621
answered Nov 22 '18 at 11:12
Hiren VaghasiyaHiren Vaghasiya
3,9201621
answered Nov 22 '18 at 11:12
Hiren VaghasiyaHiren Vaghasiya
3,9201621
3,9201621
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427811%2ftable-cell-alignment-with-image-and-text%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
td {padding;left: width of image} td img {margin-left: -??px width of image}
– Carol McKay
Nov 22 '18 at 9:40
1
please add html code
– Hiren Vaghasiya
Nov 22 '18 at 9:52
@HirenVaghasiya can you please check above code..
– Siddu h
Nov 22 '18 at 10:38