I need to center the text vertically in the block, there may be many. The size of each block fixed 111px/63px.
.producers {
width: 100%;
}
.producer {
width: 111px;
height: 63px;
margin: 20px 0 0 0;
display: inline-block;
vertical-align: middle;
border: 1px dashed #ccc;
text-align: center;
}
.producer img {
display: block;
margin-top: 8px;
}
The code can be seen by reference
jsfiddle demo
change add line-height property to the producers class
with height equal to your producer class height property
.producers{
width : 100%;
line-height:63px;
}
Related
I used display: flex and justify-content: center to center the img within the div, it did in fact center the img but it shrank the img to a very small size. How do I center the img without having it shrink? I included a picture of this. I also tried re-sizing it with .img-star img { width: 3em; }, but it doesn't work. Pls help thanks.
.img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
}
Not use flex. Use this CSS:
div {
text-align: center;
}
Don't use flex. just use this on your div
div {
text-align: center
}
Adding the align-items: center property could potentially fix it. It will also center the image vertically, if that is wanted.
I tried it with a div and it worked as intended It also appears to be fixing distorted images, such as this answer
img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}
set img display to block and set left + right margins to auto, e.g.
.img-star {
margin: 30px auto;
display: block;
padding: 20px;
border: 1px solid white;
border-radius: 50%;
width: 45px;
height: 45px;
}
You have also set the width of this class at 45px, so when this class is applied to an img it will be shrinking it to 45px. Try upping the width and height. width: 100%; height: 100%; will preserve your original image size to the max size of the block the image is in. Changing it based on px or em will set it to that e.g. width: 300px;.
I'm having problems centering an image between two float-aligned pictures.
I can't add margin-left to the image in the middle. I would like it to stay centered on resizing.
My code:
#skjirt {
display: inline;
margin-left: auto;
margin-right: auto;
float: flex;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt1 {
display: inline;
float: left;
margin-left: 20px;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt2 {
display: inline;
float: right;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
margin-right: 20px;
}
#imageWrap {
width: 100%;
height: auto;
margin-top: 100px;
}
If you want to make the image blocks display in the middle then instead of aligning them using float, just center them by applying the text-align:center to the #imageWrap container. Also change your display:inline to display:inline-block so that the img or any other element inside the boxes conform and adjust to the parent width and height.
Below is a sample code using your classes and I modified it with the suggested solution.
P.S. The suggested solution also makes the boxes to be responsive. :)
https://codepen.io/Nasir_T/pen/wqjKoa
I'm running into an issue where if I add an image as a sibling to an element then that element will shift over to accommodate the inserted image. What I want is the element to stay horizontally centered even if the image is inserted. Here is a picture of the issue:
Each row is its own div with a p element and an optional image, which is the red explanation point. I want the p element with text "Corrupted" to stay horizontally aligned even with the inserted sibling.
Here is my CSS:
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
}
#friendsList div p{
display: inline;
}
The inserted image has css like this:
#friendsList div img {
margin-bottom: 5px,
float: right,
vertical-align:middle
}
Is there a way to have the p element stay horizontally aligned even when it has a sibling?
EDIT*** Here is a CSSdeck example: http://cssdeck.com/labs/2uel0ogm
The following possibilities come to my mind:
Add the image as background image and use background-position.
Apply position: relative to the div and something like position: absolute; right: 5px; top: 5px; to the image. This makes the image absolutely positioned within the div as container.
Place image left to the p tag and give float: right to the img.
see the example
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
background: orange;
border: 1px solid red;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
float: right;
height: 25px;
width: 25px;
margin-left: -25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Alternative solution(using position property)
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table;
width: 100%;
background: orange;
border: 1px solid red;
position: relative;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
position: absolute;
right: 0;
height: 25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
I just can't realize why first child has white space right after parent's "border". What is my mistake?
.content {
font-size: 22px;
}
.content__row {
height: 150px;
}
.content__column_half {
width: 49%;
height: 100%;
display: inline-block;
box-sizing: border-box;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px dotted #000000;
background-color: graytext;
}
https://jsfiddle.net/x8ant22n/
Add this to .content__column_half:
display: block;
float: left;
margin: 0 .5%;
And remove: display: inline-block.
Fiddle: https://jsfiddle.net/x8ant22n/2/
Flex Alternative:
Add display: flex to .content__row and add flex-grow: 1 to .content__column_half`.
Remove display: inline-block
Fiddle: https://jsfiddle.net/x8ant22n/3/
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/