Centre button without using a div?

I need to centre a button without using a div as it then breaks the function of the button. How can I do this? Preferably in the <button> text. I can’t use display: block; as the button is hidden on desktop.

Thanks

is there a code pen link?

So you want it hidden on desktop, but centered on mobile? Are you using @media queries? As @ChrisCline1138 asks, do you have any code for us to view? If it is contained in a larger div (or footer, or something), simply setting the display:flex; on that and styles for both align-items and justify-items to center it.

1 Like

If you’re using a button element., just use text-align: center on the parent element. If that’s not an option you’ll have to rewrite your code on the parent div.

Here is the code:

<div class="card cardshowcase">
						<div class="card-body">
							<h5 class="card-title firstcardtitle">Hello</h5>
							<div class="read-more-container">
								<div class="extra_content">
									<hr class="introcard" align="center">
									<div class="card-text">
										<p>
											Paragraph text
										</p>
									</div>
								</div>
								<button class="read_more_btn readmorestyling">Show More</button>
							</div>
						</div>
					</div>

I am using the JS you gave me to hide the buttons on desktop and show them on mobile. Issue is, I only want this button to be centred and none of the others.

Thanks :slight_smile:

maybe you could set the display on the button to block and then set its left and right margins to auto

Can’t do that as it then shows on desktop, and it’s only meant to show on mobile.

Thanks

.read-more-container {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.read-more-container button.read_more_btn {
     max-width: 100px;
}

You’re saying you’re using the CSS I gave you in this thread?

If so, in the media query for smaller displays, rather than display: inline-block;, make it display: block; and then you should be able to center it.

Sorry, I don’t understand. Yes, it is that css :smiley:

This works for all, but I need to only align one :confused:

Thanks :smiley:

I don’t see other buttons in your HTML code.

That was just a small snippet. My whole code contains private info so I can’t share it

If your code is HTML., then anyone can see it. It’s client side code. Nothing secret about it.

Right click any website and click view source.

Yep, but working on it and don’t want to publish it yet.

Your solution worked, thanks! :slight_smile:

Just renamed it to

.read-more-container-first {
	display: flex;
	flex-flow: column;
	align-items: center;
}

Thanks :smiley: