My icons look like this: I need to create like this one: Here is my HTML: <aside class="social"> <a href="https://www.instagram.com/" class="inst"><span><i class="fa fa-instagram" aria-hidden=&q
I have not been able to solve this problem searching on the net. I have an Activity indicator view with a layer I would like to customize. More specifically I want to increase its size. The problem is that the activity indicator is not centered anymo
So, I have an image and I want to display in the center of it some text. Code: .img { position: relative; } .img h3 { position: absolute; width: 100% top: 85px; text-align: center; } Ok, so I managed to do it. But here is the thing: when I resize my
Have tried a lot of different things but can not figure out why it won't center. Any help would be awesome! nav { font-size: 18px; } ul { list-style-type: none; display: inline-block; } li { display: inline-block; } li a { color: #F55F5F; padding: 10
I would like to have both texts center vertically to image on resolution 720px. The text "serwis" is not centered vertically to image right now. How should I do it? Here's a demo codepen HTML code <section class="primary"> <fi
Centering elements horizontally is easy using margin: 0 auto; However, it doesn't work if there are two elements stacked in a column and one has a scrollbar and the other does not. In that case, the two horizontal centered elements aren't aligned any
Tried a lot already like, verticle-align and line-height, but without success. This is what I have so far from trying suggestions from the internet, but as said before without success. <div class="logo"> <a href="#"> <im
This is a short question: Suppose I have a RecyclerView that has undefined number of items, what should I do to it, so that if there is a small number of items that (all) can fit the screen, they will be centered and the user won't be able to scroll
okay its been about an hour of googling and at this point im probably overthinking it. HTML <body> <div class="#wrapper"> <div class="container-fluid"> <img src="background-image.jpeg" alt="">
As the title says, I have drop-downs on my webpage (templates because I want to get them right first) and they have aligned themselves centered with their parent on the left margin. No matter what I try, I cannot get them all to center correctly with
I define a column as follows: { name: 'button', displayName: '', cellClass: 'ui-grid-vcenter', enableColumnMenu: false, enableFiltering: false, enableSorting: false, cellTemplate: '<div><button ng-click="grid.appScope.rowButtonHandler(row.en
the problem is, i know i can center all the three objects in the list correctly using 3 while loops with CSS, but i also know than use 3 whiles loops for something like that is a waste of resources Also i love if the solution includes order them rela
I want to know is there a way to centre text vertically without the use of a container element. something which is responsive. EDIT the only value I would know is the height of the h3 element, nothing more, content will appear underneath some as etc
I have this code: <div class="well"> <form role="form" id="shop-order" method="post" action=""> <div class="row"> <div class="form-group"> <div class="co
On this page, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by Wordpress. <div class="menu-footer-menu-container"> <ul id="menu-footer-menu" class="menu"&g
Someone told me that it would be hard to center an navigation bar with fixed width. Is it true? That's my itch right now. Here's my navigation bar CSS: nav ul{ list-style-type: none; padding: 15px 0px 32px 0px; } nav ul ul{ display: none; } nav ul li
I want my jframe to open in the center of a person's monitor. (By default a jframe will open at coordinate. (0,0)) To achieve this, before setting the frame visible, I use this method. this.setLocation(x,y); In theory, monitor screen sizes can be dif
I've got 3 lists. I'm looking to center them on a page in a horizontal fashion. How can I do this? Thank you!This is quite easy with inline-block: #container { text-align: center; } #container ul { display: inline-block; } jsFiddle Demo
Been playing around for a while now with trying to get this to work so I have set up a CodePen and hope you guys can help: CODEPEN I need the height and width of .container to be specified with percentages rather than static pixel widths to fit my de
I have this simple page layout: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> body { text-align: center; margin: 0; paddin
I have a 3 level structure: <div class="workingArea"> <div class="imageContainer"> <img class="theImage" /> </div> </div> the "workingArea" size is determined by the browser's size (usi
I have the following HTML: <div class="outer"> <div class="inner rotate">Centered?</div> </div> div.outer is a narrow vertical strip. div.inner is rotated 90 degrees. I would like the text "Centered?"
I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally. How can I achieve that? div { width: 300px; height: 100px; } p { position: absolute;
I have noticed that this forum I have written is fine in most browsers although in IE8 its to the left and not centered. Its CSS is margin: auto auto, which works in most browsers. I don't want to resort to going old fashioned and putting align="cent
I have a div that is absolute positioned (because it holds sub-divs that are themselves absolutely positioned), that I want horizontally centered. I can achieve that using the following CSS width : 512px; position : absolute; left : 50%; margin-left
I noticed that most of my swing GUIs would flicker right before they center themselves. This happened with almost any JFrame that I have made, I was wondering if there is a workaround. I usually call setVisible(true), then pack(), followed by setLoca
Say you've got a very simple centred design, a 500px div centred in the viewport with margin: 0 auto;: |<- auto -> +------ 500px -----+ <- auto ->| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +--------------------+ | and then you
I'm trying to achieve this layout with CSS (without tables, I guess. Whatever). Any ideas? There's a few things you can do but it depends on the specifics of the problem. A few questions: Is the photo always the same height? Is there always only one
I'm using extjs and just trying to solve a simple problem: I have a form with a fixed width. I want to Center this form within a normal Ext.Panel. I'm trying to achieve this the 'css-way' - setting the left and right margin to 'auto'. But this doesn'
I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a dynamic
