In a div with text-align: center; applied, I have two tags. My issue is that I want one of them to be centered on the same line, while the other is positioned to the right. However, both tags are currently sharing the centered space and extending equally to the left and right. Unfortunately, I am unable to remove the text-align: center; or determine the width of either tag.
For an example, you can view the following codepen: https://codepen.io/darrow8/pen/ZgYWrw
Here is a quick and easy way to center content using flexbox and absolute positioning.
HTML
<div class="wrapper">
<h4>CENTERED </h4>
<button>LEANING RIGHT</button>
</div>
CSS
.wrapper {
display: flex;
justify-content: center;
align-items: center;
background-color: grey;
position: relative;
}
button{
position: absolute;
right: 10px;
}
See a screenshot of the code in action
Check out the demo on Codepen https://codepen.io/junaydk/full/YmPWJL
Are you attempting to achieve a design similar to this?
<div style="background-color:grey;text-align: center; position: relative">
<h4 style="display:block">CENTERED</h4>
<button style="position:relative; left: 50px;">LEANING RIGHT</button>
</div>
In order to achieve the desired outcome, it is important to enclose the two elements within an inline-block container. This ensures that the wrapper does not occupy the entire width of its parent element. It may be necessary to adjust the parameters of the translate() function accordingly. The second element is included for comparison purposes.
.wrapper {
background-color: pink;
display: inline-block;
transform: translate(25%, 0);
}<div style="background-color:grey;text-align: center;">
<div class="wrapper">
<h4 style="display:inline-block">CENTERED </h4>
<button>LEANING RIGHT</button>
</div>
</div>
<br/>
<br/>
<br/>
<div style="background-color:grey;text-align: center;">
<h4 style="display:inline-block">CENTERED </h4>
</div>If you want to center text within a box, you need to give a tag with text a height property and then set the line-height property to the same value as the height property. Here's an example:
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* -- rest css first -- */
*{
padding: 0;
margin: 0;
}
h2{
margin: 5px auto;
text-align: center;
background-color: rgba(89, 89, 89, 0.62);
font-family: Tahoma;
}
.box1{
width: fit-content;
height: 200px;
/*this is for text to be center of the box*/
line-height: 200px;
text-align: center;
/*----------------------------------------*/
background-color: #5548ff;
margin:10px auto;
color: #fff;
font-size: 25px;
font-family: Verdana;
padding: 5px;
}
.box2{
width: fit-content;
height: 300px;
/*this is for text to be center of the box*/
line-height: 300px;
text-align: center;
/*----------------------------------------*/
background-color: rgba(255, 46, 81, 0.76);
margin:10px auto;
color: #fff;
font-size: 25px;
font-family: Verdana;
padding: 5px;
}
</style>
</head>
<body>
<h2>In these boxes, height=line-height for text to be center of the box</h2>
<div class="box1">
This text is centered within the box
</div>
<div class="box2">
This text is centered within the box
</div>
</body>
</html>
Give this code a try, it might provide a solution for you.
button {
float: right;
margin: 20px 20px 0 0;
}
Can anyone explain why the .slot or .card classes in this code have a larger margin at the bottom compared to the top? Appreciate any help, Link to JsFiddle: http://jsfiddle.net/Tighttempo/LgeAf/ <div id="hand"> <div class="card" id="card1" ...
Is it possible to adjust capital spacing (cpsp) for an element without impacting any other applied OpenType features? Unfortunately, utilizing the font-feature-settings is not a viable solution. For example, if we use font-feature-settings: 'cpsp&apo ...
Seeking assistance with a design challenge, further details are available in the screenshot I've provided. I am attempting to apply a unique border bottom style to or text, with specific width specifications that do not span the entire word length. ...
My website utilizes a bootstrap feature for mobile devices where a left sidebar pops up when clicking a button. I am not very familiar with bootstrap, but I would like to link a javascript event to determine if the left sidebar is visible. How can I achiev ...
Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...
I have a flexslider with thumbnails like this ; https://i.stack.imgur.com/9bfC2.jpg I am looking to change the slide when the user hovers over the thumbnails. How can I achieve this functionality? Here is the jQuery code I am currently using to set up th ...
Is there a way to display the Material UI CircularProgress component at a size that nearly fills the parent div, which has an unknown size? Ideally, I want the size to be around 0.8 * min(parent_height, parent_width). I've experimented with adjusting ...
Situation When exporting to HTML, the resulting code appears as follows: <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style type="text/css" ...
I have a webpage and I would like to zoom its body when it loads using jQuery. However, the CSS zoom feature is not working in Mozilla Firefox. This is what I currently am using: $("body").css("zoom", "1.05"); It worked in Chrome, Opera, and Edge, but un ...
The excitement around HTML5 and CSS3 is hard to ignore. But when is the right time to start incorporating them into our projects? How close are we to fully utilizing their capabilities? Update: I'm not interested in following the principles of: Grac ...
Utilizing a radmenu, I am able to dynamically generate a submenu structure by examining folders in sharepoint document libraries. However, when placing multiple controls on the page, the root menu from other controls overlaps with the submenu of the curren ...
My objective is to implement JavaScript on the server side. To achieve this, I have decided to use node.js as it seems like the most logical solution. While I am quite familiar with node.js from working on applications, I now need to utilize it for server- ...
After doing some research and trying out various solutions, I still couldn't get it to work. I made adjustments to my dropdown menu and click function so that each submenu opens and closes when its parent is clicked. However, I'm now looking to f ...
Looking to include notes on the right side of each input field? Check out this example I put together using a bootstrap layout. <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4 ...
Currently, I am in the process of creating a dynamic Vuetify navigation drawer and I have the intention of storing images in a JSON array. My main inquiry revolves around figuring out if it's feasible to extract the image attribute and incorporate it ...
Using the bootstrap grid system has caused a slight issue for me. Whenever I scroll to the right side of the window, there is a white space that appears: https://i.sstatic.net/YHj92.png I have set the body width as 100vw; Is there a way to eliminate this ...
Why does the map on my website only load when the browser window is resized? Below is the JavaScript code being used: <div class="map-cont"> <div id="map" class="location-container map-padding" style="width:100%;height:400px;background:y ...
Currently working on a new toy website, but encountering some unexpected behavior. On the homepage HTML file, there are two separate sets of <body> tags: <body class = "intro">...</body> <body class = "home">...</body& ...
Recently, I encountered a scenario where I have an xhtml page containing a sessionscoped bean. I am looking to utilize this page twice within another html page - once on the left side and again on the right side of the screen. The issue I faced is that w ...
When validating text fields in an HTML form, I am looking to check two conditions. Currently, the code below checks if the phone number entered is in the correct format and displays a message 'Enter a valid mobile number' if it is incorrect using ...