I have a div in my app containing profile information like name, account #, and profile picture. For some reason the profile picture won't center even though I've tried the text-align:center trick. Here's my HTML:
<div id="profile-heading">
<img alt="6dbepurq" src="http://anymarket.s3.amazonaws.com/users/avatars/000/000/015/medium/6dBEpuRQ.jpeg?1406690559">
<h2>Tom Maxwell</h2>
<p id="school">University of California, Berkeley</p>
<p>User #15</p>
</div>
And the CSS for the #profile-heading div looks like this:
#profile-heading {
text-align:center;
margin-top:50px;
img{
border-radius:50%;
width:150px;
height:150px;
}
h2{
font-weight:800;
margin-bottom:5px;
}
}
Any idea?
img tag by default is inline-block and you must use text-align: center in parent container to align img tag horizontally.
In case of it's display property value has been changed to block you should set styles margin-left: auto; margin-right: auto; to center horizontally.
When I un-nested your styles everything worked in centering the image:
#profile-heading {
text-align:center;
margin-top:50px;
}
#profile-heading img {
border-radius:50%;
width:150px;
height:150px;
}
#profile-heading h2 {
font-weight:800;
margin-bottom:5px;
}
Nested are only for CSS pre-processors using SASS or LESS.
Another way to center things is with auto left and right margins: margin: 0 auto; Hope this helps!
Setting display property for img would do the trick:
#profile-heading {
text-align:center;
margin-top:50px;
img{
border-radius:50%;
width:150px;
height:150px;
display: inline-block; /* added this line */
}
h2{
font-weight:800;
margin-bottom:5px;
}
}
As <img> tag is not a block level element which means text-align property will not work as expected. You can do 2 things to solve this issue.
Either apply text-align: centeron parent element.
make the <img> tag a block level element using display: inline-block;.
You can see a DEMO here.
Related
I made a div and used float:right in i but the float property is not working.
*Update: I found out that the reason the code isn't working is because of the display: inline-block that keeps the position of the div. How do I override the display?
#about{
display:inline-block;
}
#about-title{
text-align:center;
padding:15px;
color:white;
background:#774C60;
float:right;
}
Use it :
#about{
display:block;
}
or
#about{
width:100%;
}
The spec mentions that the vertical-display property (which only applies on inline and inline block elements ) aligns the element itself but not its content. A span, as i understand it is the element. In this fiddle everything works as expected but would need to be done in order to center the actual text "Beta" in the span?
https://jsfiddle.net/69uhamv5/
.b{
display:inline-block;
background-color:red;
height:120px;
vertical-align:middle;
}
<span class="b">Beta</span>
P.S: Im not looking for a quick solution, i am aware i can use line height or display table or a handful of other things. I am more intersted in figuring out exactly why it is that this doesnt work, or rather, why it is that it targets the span element but not the text inside and what would i need to to to target the text inside.
So, you have somme solution:
Variant 1 add line-height
.b{
background-color:red;
display: inline-block;
height:120px;
line-height: 7.5em;
}
try here: https://jsfiddle.net/69uhamv5/6/
Variant 2 center with table
.b, span {
display: table-cell;
vertical-align:middle;
}
.b {
background-color:red;
height:120px;
}
body{
display: table;
height:300px;
}
}
try here https://jsfiddle.net/69uhamv5/5/
Here is my approach :
.b{
background-color:red;
height:120px;
display: inline-flex;
align-items: center;
}
body{
height:300px;
}
}
<body>
<span >Alpha</span><span class="b">Beta</span><span>Gamma</span>
<script src="js/scripts.js"></script>
</body>
I have a p element with a defined Background Color that should adapt it's size automatically to the text inside it. I tried Setting the width to Auto, but the p element still spans 100% as visible by the defined Background Color.
how do I get the width to adjust accordingly without Setting the width in % or px everytime?
Code:
#job-xyz.titel {
background-color: #dceff5;
font-size:17px;
color:black;
text-align: left;
margin-top:0px;
padding-left:10px;
margin-left:45px;
width:auto;
}
<div class="header2">
<p class="titel"><strong>Linux Softwaree</strong></p>
</div>
To set width equal to content, use display:inline-block
#job-xyz.titel {
background-color: #dceff5;
font-size:17px;
color:black;
text-align: left;
margin-top:0px;
padding-left:10px;
margin-left:45px;
width:auto;
display:inline-block /*added*/
}
Also, you have assigned the css wrong way around
#job-xyz.titel should be .header2 > p.titel
Your code demo and working demo
final working demo with proper css
<p> is a block-element and has to be set to inline via the "Display" property in CSS.
corrected code by "NoobEditor"
#job-xyz.titel {
background-color: #dceff5;
font-size:17px;
color:black;
text-align: left;
margin-top:0px;
padding-left:10px;
margin-left:45px;
width:auto;
display:inline-block /*added*/
}
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
Here is My Demo
<span class="boxPrice ">
<p>Previous Bill</p>
</span>
I want to create <p> inside a <span>
should be vertically aligned center inside the <span>
You can add
display:inline-block;
to your p element.
Add line-height:75px; You need to make sure the line height is the same as the div height/
http://jsfiddle.net/H4yuE/1/
I would rather not use a block level element ("p") element within an inline level element ("span"). Use div instead.
There are several tricks on how to do this, the simplest is to modify line-height to match the height of your container:
.container {
width: 100px;
height: 100px;
line-height: 100px; /* Set it to the container height */
}
You can also use "display: table-cell" to achieve the same effect:
.container {
display: table-cell;
vertical-align: middle;
}
Block elements aren't "affected" by the vertical-align: middle, only inline elements...
I suggest changing the p to inline and adding the vertical-align: middle, like this:
.boxPrice p {
padding:0 !important;
margin:0 !important;
display: inline;
vertical-align:middle;
}
Fiddle
.boxPrice
{
width:160px; height:75px; border:1px #333 solid; text-align:center; display:inline-block;}
.boxPrice p{padding:20px !important; margin:0 !important}
.boxPrice:after{ display:inline-block; content:'';vertical-align:middle; height:100%}