How can I make button to be on the left and a text to be in the center? They should be in one line. I tired this:
<html>
<body>
<div style="display: inline">Back</div>
<div style="display: inline"><center><h1>Welcome</h1></center></div>
</body>
</html>
But button is above the text.
You can use a flex container to center elements:
.container {
display: flex;
align-items: center;
}
h1 {
display: inline;
margin: 10px;
}
<div class='container'>
<button>
Back
</button>
<h1>
Welcome
</h1>
</div>
you can give margin-top to 20px; or something
<a href="/back" class="btn btn-default pull-left" role="button" style="margin-
top:20px;">Back</a>
<center><h1>Welcome</h1></center>
Related
I have three pieces of text, Events Find an Event and Post an event
Events is positioned correctly in the centre of the page, but Post An Event and Find An Event are positioned left of centre.
How do I put these two pieces of text next to each other (same line) and in the centre of the page?
Tried.
.postanevent {text-align : center! important; display:
inline-block! Important;}
.findanevent] text-align: center! Important; display: inline-
block! Important; }
Here is my html:
<div class="entry-content">
<div class="lasvegas">
Events
</div>
<div class="findanevent"><a
href="https://adsler.co.uk/find-an-event/"></p>
<div class="findanevent"><font size="3"><font
color="white">Find an Event</font></font></div>
<p></a></p>
<div class="postanevent"><a
href="https://adsler.co.uk/post-an-event/"></p>
<div class="postanevent"><font size="3"><font
color="white">Post an Event</font></font></div>
<p></a></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="edit-link"><a class="post-edit-link"
href="https://adsler.co.uk/wp-admin/post.php?
post=6811&action=edit">Edit <span class="screen-
reader-text">"Events"</span></a></span> </footer><!--
.entry-footer -->
</article><!-- #post-## -->
</div><!-- #primary -->
Page: https://adsler.co.uk/events/
You need a wrapper around the two anchors to center them both in the same line:
.event_wrapper {
text-align: center;
}
<div class="event_wrapper">
<span id="findanevent" class="event">Find an Event</span>
<span id="postanevent" class="event">Post an Event</span>
</div>
don't use the font tag anymore, it is deprecated. You can just use the classes you already have or add a new one like I did.
Hope this helps!
You need to wrap your links inside a div the use display flex. there are many ways to do this but I prefer flex it easy.
<div class="entry-content">
<div class="links-wrapper">
<div class="lasvegas">
Events
</div>
<div class="findanevent">
Find an Event
</div>
<div class="postanevent">
Post an Event
</div>
</div>
</div><!-- .entry-content -->
<style type="text/css">
.entry-content{
width: 100%;
}
.links-wrapper{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.links-wrapper > div{
margin: 0 15px;
}
</style>
Wrap your findanevent and postanevent divs into a main wrapper like <div class="eventsWrap"> and put this in a display:flex property. So that the two divs will be in same line. Because by default the display:flex property shows the child element into same line like inline or rows. Next you have to add a property is justify-content:center;, align-items:center;, align-content:center; align-self:center;. Hope it may help you! Good luck.
.eventsWrap { display:flex; justify-content:center; align-items:center; align-content:center; align-self:center;}
you can take these 3 in flex box:
<div style=" display: flex;justify-content: center;">
<div Events></div>
<div Find an Event></div>
<div Post an event></div>
</div>
I hope this will help.
Try this one for set links
<div class="entry-content" style="text-align: center;">
<div class="lasvegas">
Events
</div>
<div class="findanevent">
<a href="https://adsler.co.uk/find-an-event/">
<div class="findanevent">
<font size="3">
<font color="black">Find an Event</font>
</font>
</div>
</a>
<div class="postanevent">
<a href="https://adsler.co.uk/post-an-event/">
<div class="postanevent">
<font size="3">
<font color="black">Post an Event</font>
</font>
</div>
</a>
</div>
<!-- .entry-content -->
</div>
<!-- #primary -->
</div>
<style>
.lasvegas{
display: inline-block;
}
.findanevent{
width: 100%;
}
</style>
I hope this one is helpful
Here is my code.I have minimized it as short as I can. In that text-align:right; is not working
.forgot {
color: red;
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
As #TreyBake pointed out, center and u are not supposed to be used instead, you should use the text-align and em.
Also, here's the solution with setting right align to parent.
.forgot {
color: red;
}
.center-aligned{
text-align: center;
}
.right-aligned{
text-align: right;
}
<div class="content">
<div class="center-aligned">
<h3><em>LOREM IPSUM</em></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</div>
<br>
<div class="right-aligned">
Forgot details?
</div>
</div>
The align is set on the parent element. Not on the element itself.
.forgot {
color: red;
}
.content {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
You can use text-align: right on a parent element. Create a div wrapping your link and give him the class. See example below:
html:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
css:
.forgot {
color: red;
}
.text-right {
text-align: right;
}
If you have Bootstrap installed, you can do all of this without css. Your html would look like this:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
Please note at time of writing, this is Bootstrap v4.2.1
Here's Why It's Not Aligning
You have your <a class="forgot"> element with the "Forgot Details" text inside of it. Since it's an <a> element, by default it will only stretch to be as wide as the text you place inside it. So as you can see in the screenshot below, your <a class="forgot"> element (highlit) is only as wide as the "Forgot Details" text. So your "text-align: right;" technically is aligning the text to the right, but since the parent container (the <a class="forgot"> element) is only as wide as the text, horizontally aligning it doesn't make a difference.
How To Fix It
Where an <a> element stretches only to fit its contents, a <div> element by default stretches horizontally to fill its parent container. So what you can do is enclose your <a class="forgot"> in a <div class="forgot-parent">, and then apply the "text-align: right" to the <div class="forgot-parent"> so that the <a class="forgot"> gets aligned to the right.
So the code will look like this:
.forgot {
color: red;
}
.forgot-parent {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="forgot-parent">
Forgot details?
</div>
</div>
Note how I removed "text-align: right;" from '.forgot' and added it to '.forgot-parent'. The result is shown below. First, here is the parent <a class="forgot-parent"> div highlit.
Note how the <div class="forgot-parent"> has stretched to the full screen width. Next the <a class="forgot"> is highlit:
Note that the <a class="forgot"> is still only the width of its contents (the "Forgot Details" text), but it's now aligned to the right within its parent div.
I have a lot of links in a navbar. Most of the links are positioned to the left. I want to position some of the links to the right (right-side-login-cart). The part that is giving me trouble is that I can get the links to the right, but then cannot get the links to vertically align.
I've tried a bunch of different things to get it to work. For instance, I have float:right;, used transform to translate Y, and tried to used vertical align.
Some different attempts:
HTML
<div class="links-at-top">
<div class="links-div">
<a href="/">
<img src="example.com/img">
</a>
Link1
Link2
</div>
<div class="right-side">
<div class="positioning">
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
Attempt 1:
CSS:
.right-side {
padding-right: 50px;
display: inline-block;
}
.positioning {
position: absolute;
right: 0;
transform: translateY(-50%);
}
Attempt 2:
CSS:
.right-side {
padding-right: 50px;
display: inline-block;
}
.positioning {
vertical-align: middle;
}
Add your .right-side div into the same div as your other links so that they'll be on the same line. Then you can just float right.
.links-div {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="links-at-top">
<div class="links-div">
<div>
Link1
Link2
</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="" />
<div>
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
You can consider using flex-box
.links-at-top{
display: flex;
justify-content:space-between;
align-items:center;
}
<div class="links-at-top">
<div class="links-div">
Link1
Link2
</div>
<div class="right-side">
<div class="positioning">
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
make .links-div and .right-side both display:inline-block, and float the right-side to right.
<div class="links-at-top">
<div class="links-div">
Link1
Link2
</div>
<div class="right-side">
<ul class="positioning">
<li> <a id="right-link-1">RightLink1</a></li>
<li> <a id="right-link-2">RightLink2</a></li>
</ul>
</div>
.right-side {
display: inline-block;
float:right;
}
.links-div{
display:inline-block;
}
I have 4 columns in a row that become 1 column on mobile. The way this looks on mobile is fine, but I want to center the content in divs 2 and 4 in each row. What would be the best way to do this?
Apparently my edit was deleted or the site messed up, but I had said I want to do this vertical and horizontal. However, it was my fault I forgot to link to the page. Sorry, guys. - http://www.dismantledesign.com/testsite2/clients.html
Edit: I appreciate all the answers, but I don't think anyone understands that this div has no set height. I just want that text and icons to stay centered as the screen moves. The flex didn't seem to work because it required setting a height to the div.
I also simplified my HTML
Code
.clientsdetail {
text-align: center;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.clientinfo h3 {
padding-top: 10px;;
}
.clientinfo p {
padding: 0px 30px;
font-size: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 nopadding">
<img class="img-responsive" src="img/clients/ivey.jpg">
</div>
<div class="col-md-3 nopadding cinfo">
<div class="clientinfo text-center">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
<div class="col-md-3 nopadding cinfo">
<img class="img-responsive" src="img/clients/rufus.jpg">
</div>
<div class="col-md-3 nopadding">
<div class="clientinfo text-center">
<h3>RUFUS DAWKINS</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
</div>
You can use flex properties to make your content to center.
for more details, you can check
Flexbox: center horizontally and vertically
(UPDATED)
You can use the Pseudoclass to select the 2 and 4 div.
.row div:nth-child(2n) {
/* Your CSS Style */
}
If the content inside the 2 and 4 div are inline/inline-block, just use text-align: center;.
Demo
Here is the simple demo for the pseudoclass.
.row > div {
padding: 10px;
}
.row > div:nth-child(2n) {
color: #fff;
background: red;
text-align: center;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
Hope this is helpful for you.
Thanks.
Try a different approach. Bootstrap's floating grid system will not get you where you want.
First, remove row and col- classes so you have something like this:
<div class="my-row">
<div></div>
<div></div>
<div></div>
</div>
Then use CSS to achieve the same result as before, but with the content aligned center:
#media (min-width: 992px) {
.my-row {
display: flex;
align-items: stretch;
}
.my-row > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
If you are using SASS, then replace hardcoded 992px with the #screen-md-min variable.
Here's a JsFiddle of your simplified example:
https://jsfiddle.net/mpnz9b30/1/
<div class="col-md-6 nopadding cinfo">
<div class="clientinfo">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<a href="https://twitter.com/contracoda" target="_blank">
<span class="icon-sprite sprite-tw"> </span>
</a>
</div>
</div>
</div>
Suppose I have three buttons
<div class='button-wrap>
<a class='button'>First Button</a>
<a class='button'>Second Button</a>
<a class='button'>Third Button</a>
</div>
What is the best way to left align the first, and right align the second two? Preferably without using float.
I have tried wrapping the second two in a seperate div and using text-align:right but the extra div causes the buttons to go out of alignment with one another.
Try this.
.buttons {
display: flex;
justify-content: space-around;
}
.buttons .button:first-child {
flex-grow: 1;
}
<div class="buttons">
<div class="button">
<button>First button</button>
</div>
<div class="button">
<button>Second button</button>
</div>
<div class="button">
<button>Third button</button>
</div>
</div>
You can achieve it with display:flex - no need to change your markup
.button-wrap {
display: flex;
}
.button:nth-child(2) {
/* margin left the second button */
margin-left: auto;
}
<div class="button-wrap">
<a class="button">First Button</a>
<a class="button">Second Button</a>
<a class="button">Third Button</a>
</div>
With float, you have to wrap your links into divs like this :
.left {
float: left;
}
.right {
float: right;
}
<div class='button-wrap'>
<div class="left">
<a class='button'>First Button</a>
</div>
<div class="right">
<a class='button'>Second Button</a>
<a class='button'>Third Button</a>
</div>
</div>
Use flexbox with justify-content: space-between on the wrapper, plus put margin-left: auto on the second button. This will align everything from there on to the right, while everything before that stys left-aligned.
EDIT: I simplyfied the previous code - less is more efficient...
.wrap {
display: flex;
justify-content: space-between;
}
button:nth-child(2) {
margin-left: auto;
}
<div class="wrap">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>