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
Related
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;
}
I've got the following code:
<center><div class="body">
<span style="margin-left:5px;text-align:left;">A text</span>
</div></center>
The text-align:left; isn't working. I've also tried margin: 0px auto; and that also didn't work.
Please help me...
Apply display: block on span
.body span{margin-left:5px;text-align:left; display: block;}
<center><div class="body">
<span>A text</span>
</div></center>
Please try following code:
<center>
<div class="body">
<div style="margin-left: 5px; text-align: left;">A text</div>
</div>
</center>
However <center> tag is deprecated in HTML5 bcz it is related with alignment of content for which its better to use CSS..
A better approach is as follows:
<div class="body">
<span>A text</span>
</div>
.body {
text-align: center;
}
.body span {
text-align: left;
margin-left: 5px;
display: block;
}
I would not use a SPAN in this case, I would use a DIV or a P. A SPAN element is not for showing lots of content and you can not put other block elements inside the SPAN otherwise it won't validate. I only say that because I misused the SPAN element for years by myself ;).
I am trying to align vertical some text in a div here:
HTML:
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
</div>
<div class="div12">
yo
</br>
yo
</div>
</div>
CSS:
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
}
.div12 {
padding-top: 5px;
}
JSFiddle:
http://jsfiddle.net/4mVPG/1/
The height of my divs is fixed so all I want to do is set up a padding-top on the last div (.div12) to move the text down a bit. However when I add a padding-top all the box are brought down.
Why is this happening and how can I fix this? Thanks
When you use inline-block, each block acts as if it where text that gets alined (by default) on the baseline. If you increase the height of the second block, the baseline goes down, and the first block as well.
You can use vertical-align: top to change this.
Just replace CSS with this:
.div1 {
height: 40px;
}
.div1 > div {
float: left;
}
.div12 {
padding: 0 0 0 3px;
}
The div1 div selector also applies to all descendants so using > only applies to first one. Also if container is height fixed i think it's better to use float.
JSFidle
Hope it helps!
You can use ".div1 div {display: inline-block;vertical-align: top;}" and there is no need for .div12 { margin-top: 30px; } since you want both aligned top and no extra space on top of "Text div"
Also, just for a better practice, avoid using "<br>" tag, there are many "Block" tag like, <div>, <p> etc. and if there are list of "links" use "<ul><li>" and you can control the margins and spaces with CSS.
Here is the updated code :
HTML
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"/>
</div>
<div class="div12">
<ul>
<li>yo
</li>
<li> yo
</li>
</ul>
</div>
</div>
CSS
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
vertical-align: top;
}
.div12 ul,
.div12 li{
margin:0;
padding:0;
list-style:none;
}
Working Fiddle for the same: http://jsfiddle.net/PK3UU/
Hope this is helpful!!!
Is it what you want ? http://jsfiddle.net/4mVPG/4/ i cleaned up css a little bit
div {
height: 40px;
display: inline-block;
vertical-align:middle;
}
and for html
<div class="div11">
<img src="http://placekitten.com/40/40" alt="" width="40px" />
</div>
<div class="div12">
yo
<br />
yo
</div>
I have tried using float left/right, which puts them next to each other but I want them to be evenly spaced from left to right. I tried using padding/margin tags, but they don't work either. Any help would be appreciated!
Code:
<div class="options">
<ul style="list-style:none;">
<li>
<img src="magger.jpg" width="180" height="180"/><br> Do Stuff To His Dog
</li>
<p>
<li>
<img src="me.jpg" width="180" height="180"> <br>Examine His Checkered Past</p>
</li>
<p>
<li>
<img src="wife.jpg" width=180 height=180><br>Sexually Harass His Wife</p>
</li>
</ul>
CSS:
.options li {
float:right;
}
You're over complicating it:
HTML:
<div class="images">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>
CSS:
.images {
text-align : center;
}
.images img {
width : 75px;
height : 75x;
margin : 10px;
}
Demo: http://jsfiddle.net/6VrJR/
add this to your css-code:
ul{
width : 550px;
margin: auto;
}
here is a jsfiddle as well
Define width and auto margin for the UL. Also, give margin and text-align center for the text.
.options ul {
width:564px;
margin:auto;
padding:0;
}
.options li {
float:right;
text-align:center;
margin:0 4px;
}
Here is the jsfiddle: http://jsfiddle.net/EASFG/
Do not use floats:
Instead of using floats for your children elements, let them flow inside an anchor tag. Anchor tags have inline as default display behavior (add display: inline; if you need to use another tag instead).
The trick that centers the links is the container text-align: center; property.
This can be translated in code as follows:
Define your container class
.container {
width: 100%;
text-align: center;
display: block;
margin: auto;
}
Create your HTML structure:
<div class='container'>
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
</div>
Demo: http://codepen.io/manuelro/pen/Abgox
Regards,
M
I want to create my first web page but I encountered a problem.
I have the following code:
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
I'd like to know how to make the logo and the H1 to be in the same line.
Thanks!
As example (DEMO):
HTML:
<div class="header">
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
</div>
CSS:
.header img {
float: left;
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
DEMO
Try this:
Put both elements in a container DIV.
Give that container the property overflow:auto
Float both elements to the left using float:left
Give the H1 a width so that it doesn't take up the full width of it's parent container.
If your image is part of the logo why not do this:
<h1><img src="img/logo.png" alt="logo" /> My website name</h1>
Use CSS to style it better.
And it is also best practice to make your logo a hyperlink that take the user back to the home page.
So you could do:
<h1 id="logo"><img src="img/logo.png" alt="logo" /> My website name</h1>
Try this:
<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
Just stick the img tag inside the h1 tag as part of the content.
you can do this by using just one line code..
<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
You can do it as Billy Moat told you, wrap your <img> and <h1> in a <div> and use float: left; to float your image to the left, set the <div> width and than set a line-height for your h1 and use <div style="clear: float;"></div> to clear your floating elements.
Fiddle
I'd use bootstrap and set the html as:
<div class="row">
<div class="col-md-4">
<img src="img/logo.png" alt="logo" />
</div>
<div class="col-md-8">
<h1>My website name</h1>
</div>
</div>
This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.
whois.css
.header-img {
height: 9%;
width: 15%;
}
header {
background: dodgerblue;
}
header h1 {
display: inline;
}
whois.html
<!DOCTYPE html>
<head>
<title> Javapedia.net WHOIS Lookup </title>
<link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
<header>
<img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
<h1>WHOIS Lookup</h1>
</header>
</body>
output:
in your css file do img { float: left; } and h1 {float: left; }
Check this.
.header{width:100%;
}
.header img{ width: 20%; //or whatever width you like to have
}
.header h1{
display:inline; //It will take rest of space which left by logo.
}
<head>
<style>
header{
color: #f4f4f4;
background-image: url("header-background.jpeg");
}
header img{
float: left;
display: inline-block;
}
header h1{
font-size: 40px;
color: #f4f4f4;
display: inline-block;
position: relative;
padding: 20px 20px 0 0;
display: inline-block;
}
</style></head>
<header>
<a href="index.html">
<img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
<a href="index.html">
<h1><span> Technocrat</span> Blog</h1></a>
</div></header>
Steps:
Surround both the elements with a container div.
Add overflow:auto to container div.
Add float:left to the first element.
Add position:relative; top: 0.2em; left: 24em to the second element (Top and left values can vary according to you).