Vertical and horizontal centre aligning an image and a text inside a container div
I am trying to create a list of thumbnail type divs. The divs have fixed height and width. The div containes an image and a title text. Both the image and the title text need to be in the vertical and horizontal cen ter of the container div. I am able to center the image but cannot quite make out how to position the text. I need to design it with css only.
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="../something.svg">
<div>Name of something</div>
</div>Please suggest what changes I need to make to the CSS or HTML.
html css
edited Nov 23 '18 at 9:17
Praveen Kumar Purushothaman
135k23140188
asked Nov 23 '18 at 9:13
Debopam ParuaDebopam Parua
10713
add a comment |
I am trying to create a list of thumbnail type divs. The divs have fixed height and width. The div containes an image and a title text. Both the image and the title text need to be in the vertical and horizontal cen ter of the container div. I am able to center the image but cannot quite make out how to position the text. I need to design it with css only.
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="../something.svg">
<div>Name of something</div>
</div>Please suggest what changes I need to make to the CSS or HTML.
html css
edited Nov 23 '18 at 9:17
Praveen Kumar Purushothaman
135k23140188
asked Nov 23 '18 at 9:13
Debopam ParuaDebopam Parua
10713
Can you complete the missing CSS part in the snippet to make it look like what you have now?
– Praveen Kumar Purushothaman
Nov 23 '18 at 9:17
Try usingtext-align: center;in style/css for the div where you want the text to be aligned to the center.
– Vasanthi GV
Nov 23 '18 at 9:34
add a comment |
I am trying to create a list of thumbnail type divs. The divs have fixed height and width. The div containes an image and a title text. Both the image and the title text need to be in the vertical and horizontal cen ter of the container div. I am able to center the image but cannot quite make out how to position the text. I need to design it with css only.
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="../something.svg">
<div>Name of something</div>
</div>Please suggest what changes I need to make to the CSS or HTML.
html css
edited Nov 23 '18 at 9:17
Praveen Kumar Purushothaman
135k23140188
asked Nov 23 '18 at 9:13
Debopam ParuaDebopam Parua
10713
I am trying to create a list of thumbnail type divs. The divs have fixed height and width. The div containes an image and a title text. Both the image and the title text need to be in the vertical and horizontal cen ter of the container div. I am able to center the image but cannot quite make out how to position the text. I need to design it with css only.
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="../something.svg">
<div>Name of something</div>
</div>Please suggest what changes I need to make to the CSS or HTML.
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="../something.svg">
<div>Name of something</div>
</div>.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="../something.svg">
<div>Name of something</div>
</div>html css
html css
edited Nov 23 '18 at 9:17
Praveen Kumar Purushothaman
135k23140188
asked Nov 23 '18 at 9:13
Debopam ParuaDebopam Parua
10713
edited Nov 23 '18 at 9:17
Praveen Kumar Purushothaman
135k23140188
asked Nov 23 '18 at 9:13
Debopam ParuaDebopam Parua
10713
edited Nov 23 '18 at 9:17
Praveen Kumar Purushothaman
135k23140188
edited Nov 23 '18 at 9:17
Praveen Kumar Purushothaman
135k23140188
edited Nov 23 '18 at 9:17
Praveen Kumar Purushothaman
135k23140188
135k23140188
asked Nov 23 '18 at 9:13
Debopam ParuaDebopam Parua
10713
asked Nov 23 '18 at 9:13
Debopam ParuaDebopam Parua
10713
asked Nov 23 '18 at 9:13
Debopam ParuaDebopam Parua
10713
10713
Can you complete the missing CSS part in the snippet to make it look like what you have now?
– Praveen Kumar Purushothaman
Nov 23 '18 at 9:17
Try usingtext-align: center;in style/css for the div where you want the text to be aligned to the center.
– Vasanthi GV
Nov 23 '18 at 9:34
add a comment |
Can you complete the missing CSS part in the snippet to make it look like what you have now?
– Praveen Kumar Purushothaman
Nov 23 '18 at 9:17
Try usingtext-align: center;in style/css for the div where you want the text to be aligned to the center.
– Vasanthi GV
Nov 23 '18 at 9:34
Can you complete the missing CSS part in the snippet to make it look like what you have now?
– Praveen Kumar Purushothaman
Nov 23 '18 at 9:17
Can you complete the missing CSS part in the snippet to make it look like what you have now?
– Praveen Kumar Purushothaman
Nov 23 '18 at 9:17
Try using
text-align: center; in style/css for the div where you want the text to be aligned to the center.– Vasanthi GV
Nov 23 '18 at 9:34
Try using
text-align: center; in style/css for the div where you want the text to be aligned to the center.– Vasanthi GV
Nov 23 '18 at 9:34
add a comment |
2 Answers
2
active
oldest
votes
first what do you mean 'Both the image and the title text need to be in the vertical and horizontal center of the container div' ?.
At the same time, they whould be in horizontal and vertical ? Anyway if you want them to be in horizontal, you can use flexbox like this :
.thumb {
display : flex;
flex-direction: row; // change this to 'column' if you want vertical
// for center
align-items: center;
}
Hope this will help you.
answered Nov 23 '18 at 9:30
Arouna Faïçal KindaArouna Faïçal Kinda
12
add a comment |
/*The ans is simple you use a wrapper*/
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}
/*The ans is simple you use a wrapper make it flex*/
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper">
<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg">
<div>Name of something</div>
</div>
</div>answered Nov 23 '18 at 10:33
Arindam SarkarArindam Sarkar
13
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
});
}
});
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%2f53443635%2fvertical-and-horizontal-centre-aligning-an-image-and-a-text-inside-a-container-d%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
first what do you mean 'Both the image and the title text need to be in the vertical and horizontal center of the container div' ?.
At the same time, they whould be in horizontal and vertical ? Anyway if you want them to be in horizontal, you can use flexbox like this :
.thumb {
display : flex;
flex-direction: row; // change this to 'column' if you want vertical
// for center
align-items: center;
}
Hope this will help you.
answered Nov 23 '18 at 9:30
Arouna Faïçal KindaArouna Faïçal Kinda
12
add a comment |
first what do you mean 'Both the image and the title text need to be in the vertical and horizontal center of the container div' ?.
At the same time, they whould be in horizontal and vertical ? Anyway if you want them to be in horizontal, you can use flexbox like this :
.thumb {
display : flex;
flex-direction: row; // change this to 'column' if you want vertical
// for center
align-items: center;
}
Hope this will help you.
answered Nov 23 '18 at 9:30
Arouna Faïçal KindaArouna Faïçal Kinda
12
add a comment |
first what do you mean 'Both the image and the title text need to be in the vertical and horizontal center of the container div' ?.
At the same time, they whould be in horizontal and vertical ? Anyway if you want them to be in horizontal, you can use flexbox like this :
.thumb {
display : flex;
flex-direction: row; // change this to 'column' if you want vertical
// for center
align-items: center;
}
Hope this will help you.
answered Nov 23 '18 at 9:30
Arouna Faïçal KindaArouna Faïçal Kinda
12
first what do you mean 'Both the image and the title text need to be in the vertical and horizontal center of the container div' ?.
At the same time, they whould be in horizontal and vertical ? Anyway if you want them to be in horizontal, you can use flexbox like this :
.thumb {
display : flex;
flex-direction: row; // change this to 'column' if you want vertical
// for center
align-items: center;
}
Hope this will help you.
answered Nov 23 '18 at 9:30
Arouna Faïçal KindaArouna Faïçal Kinda
12
answered Nov 23 '18 at 9:30
Arouna Faïçal KindaArouna Faïçal Kinda
12
answered Nov 23 '18 at 9:30
Arouna Faïçal KindaArouna Faïçal Kinda
12
answered Nov 23 '18 at 9:30
Arouna Faïçal KindaArouna Faïçal Kinda
12
12
add a comment |
add a comment |
/*The ans is simple you use a wrapper*/
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}
/*The ans is simple you use a wrapper make it flex*/
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper">
<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg">
<div>Name of something</div>
</div>
</div>answered Nov 23 '18 at 10:33
Arindam SarkarArindam Sarkar
13
add a comment |
/*The ans is simple you use a wrapper*/
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}
/*The ans is simple you use a wrapper make it flex*/
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper">
<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg">
<div>Name of something</div>
</div>
</div>answered Nov 23 '18 at 10:33
Arindam SarkarArindam Sarkar
13
add a comment |
/*The ans is simple you use a wrapper*/
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}
/*The ans is simple you use a wrapper make it flex*/
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper">
<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg">
<div>Name of something</div>
</div>
</div>answered Nov 23 '18 at 10:33
Arindam SarkarArindam Sarkar
13
/*The ans is simple you use a wrapper*/
.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}
/*The ans is simple you use a wrapper make it flex*/
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper">
<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg">
<div>Name of something</div>
</div>
</div>.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}
/*The ans is simple you use a wrapper make it flex*/
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper">
<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg">
<div>Name of something</div>
</div>
</div>.thumb {
height: 100px;
width: 96px;
padding: 3px;
cursor: pointer;
}
.thumb img,
.thumb svg {
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
.thumb div {
position: absolute;
}
/*The ans is simple you use a wrapper make it flex*/
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper">
<div id="Thumb" class="thumb ml-10 mt-10 float-left ui-sortable-handle">
<img src="https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg">
<div>Name of something</div>
</div>
</div>answered Nov 23 '18 at 10:33
Arindam SarkarArindam Sarkar
13
answered Nov 23 '18 at 10:33
Arindam SarkarArindam Sarkar
13
answered Nov 23 '18 at 10:33
Arindam SarkarArindam Sarkar
13
answered Nov 23 '18 at 10:33
Arindam SarkarArindam Sarkar
13
13
add a comment |
add a comment |
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.
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%2f53443635%2fvertical-and-horizontal-centre-aligning-an-image-and-a-text-inside-a-container-d%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
Can you complete the missing CSS part in the snippet to make it look like what you have now?
– Praveen Kumar Purushothaman
Nov 23 '18 at 9:17
Try using
text-align: center;in style/css for the div where you want the text to be aligned to the center.– Vasanthi GV
Nov 23 '18 at 9:34