So I was trying achieve this logo but the text wont go in middle.
I have tried vertical align and line-height but no luck. Hope someone helps :)
Code:
<div>
<div id="logo">
<div id=""></div>
<p>title<br>
text</p>
</div>
<div id="">
</div>
</div>
CSS
#header {height: 100px; background: #fff}
#logo div {background: url(/img/logo.png) center/contain no-repeat; width: 70px; height: 70px; float: left}
#logo p {vertical-align: middle}
try this css on the container element
display: flex;
align-items: center;
justify-content: center;
If you're using html and css, just make sure that both the text and the image are in the same div.
You can also follow this tutorial if that can make it easier: https://css-tricks.com/text-blocks-over-image/
Hope this works .
simple example
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span >verticle text.</span>
</div>
There are a few methods.
One of them is:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Try with text:
transform: translate(12px, 76px); //adjust it to fit your needs
Well flexbox is the easiest way to go around
<div id='foo'>
<div id='logo'><img src='path.png'></div>
<div id='text'>Title HEre</div>
</div>
CSS:
#foo {
display:flex;
align-items:center;
}
Related
So this is probably an easy answer, but my image which is supposed to be sitting in the middle of the page is slightly off and it's irritating me a lot.
HTML:
</section>
<section class="img_section">
<div>
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
CSS:
img section{
float:center;
text-align:center;
}
I've tried removing float, and taking it out of a section entirely, but it won't budge.
Any help would be amazing
there's no such thing as float: center;
also img section doesn't style image within section.
you could try either:
1:
img {
display: block;
margin: 0 auto;
}
2:
section div {
text-align: center;
}
section div img {
display: inline-block;
}
depending on your other styles
This is simple to answer.
#div1 {
text-align: center;
}
</section>
<section class="img_section">
<div id="div1">
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
The text-align: center; property is going to make all the elements inside the div centered. Also, it is better if you select the div with a specific class or ID. This is going to go on all div elements on the page.
this is much more simple. just include center tag as
<center>
<section>
<div>
<img src="images/menu.jpg" alt="menu" align="center">
</div>
</section>
</center>
try in css:
.img_section img{
text-align:center;
}
html:
<section class="img_section">
<img src="images/menu.jpg" alt="menu" align="center">
</section>
I like to use
margin: 0 auto;
for centering
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I'm pretty new to the front-end materials so bear with me
while I try to explain the question.
I'm having an issue trying to align three boxes together side by side.
However, when I try to add the <p> tag within the box, a top margin
gets added. Here is what I mean.
<div class="work-box">
<div class="box">
<div class="idea">
</div>
<p>Hello World</p>
</div>
<div class="box">
<div class="idea">
</div>
</div>
<div class="box">
<div class="idea">
</div>
</div>
</div>
As you can see, the boxes are wrapped within the "work-box" class. Here is the CSS code.
.work-box {
text-align: center;
}
.box {
margin-top: 30px;
display: inline-block;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
.idea {
height: 50%;
background: url('img/idea.svg') center no-repeat;
background-size: contain;
}
I have been struggling with this issue for this whole entire day and I just cannot figure it out. Please help!
Thank you so much.
Solution: Add vertical-align: top to your .box class.
Explanation: The effect that you saw was because for all inline elements, the vertical-align is defaulted to baseline.
This behaves funny when you have inline elements inside of your .box. Because it will try to align the last inline element to the baseline of all your inline elements.
Try adding vertical-align:middle; to the box class.
.box {
margin-top: 30px;
display: inline-block;
vertical-align:middle;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
See Codepen Example here .
You try using <span>Hello world</span> instead of <p> tag. Moreover, <p> tag is out of .idea div. Is it ok? I think it should be inside of <div class="idea">
How do I vertically center an hr element?
I've tried to place the element in some div elements...
<div class="table">
<div class="table-cell"><hr /></div>
</div>
<div class="table">
<div class="table-cell">Some text Here!</div>
</div>
<div class="table">
<div class="table-cell"><hr /></div>
</div>
I've left out that I am using bootstrap and have these three div elements with the class of table in the same row using the col-size-number format.
So I'm looking for inline HR element Some Text inline HR element
--------------SOME TEXT--------------
Thank you again css guru masters!
For a simple, generic way to vertically center an hr element:
html:
<div class="container">
<hr />
</div>
css:
.container {
display: flex;
align-items: center;
}
.container hr {
width: 100%;
}
The hr element needs a width given to it (or flex-grow), otherwise it will be only a dot in the center of the container.
.container {
display: flex;
align-items: center;
height: 100px;
background: yellow;
}
.container hr {
flex-grow: 1;
}
<div class="container">
<hr />
</div>
To anyone who's stumbled upon this in the future, I have updated the answer to what I feel is a more modern, efficient approach using Flexbox
HTML:
<div class="title">
<hr />
<h3>Some text</h3>
<hr />
</div>
CSS:
.title {
display:flex;
flex-flow:row;
justify-content:center;
align-items:center;
}
hr {
flex:1;
}
h3 {
padding:0px 48px;
}
DEMO HERE
I used the following solution in my css, margin the element to the center on every device
CSS:
margin: 0 auto;
Consider the following Fiddle: http://jsfiddle.net/wNrqu/
For the last 4 hours I have been trying to do something like this:
I'm trying to make the list display four items per 'row' with the two spans's centered underneath the image. The text must be able to wordwrap. CSS is one tricky beast to master!
If you check out the Fiddle, my result is somewhat odd. Items with larger text cause a blank gap to be inserted...
<div id="container">
<div><img src="kitten.png" />Cute Kitten<br />yes</div>
......
</div>
Then in your CSS:
#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}
That should do it. Much easier than using an unordered list because then you don't have any styles that a list has by default that need overriding.
If I'm doing this css, I will not using the order list, I will using div. Maybe this will help you.
<div id="container">
<div class="row clearfix">
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p> <p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
</div>
</div>
then in the css
#container {width:1000px;}
.img {width:133px; height:200px; margin-right:20px;}
.img p{text-align:center;}
.fleft{float:left;}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
Please refer the following location:
http://jsfiddle.net/wNrqu/
Thanks for the help...although I didn't ask the question initially.
So far, it's working fine although I wanted to center everything so :
I changed the CSS from
#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}
to:
#container{margin: 0 auto;width: 1000px;}
#container div {display: inline-block; width: 150px; text-align: center;}